目前在网上还少见,代码简单,实用
<html>
<head>
<meta http-equiv="Content-Type" c />
<title>好酷DIV层弹出</title>
<style>
body{margin: 0px; font-size:9pt;}
.move{cursor:hand}
#binwin{z-index: 1000;}
#writediv{
display: none;
text-align:left;
position: absolute;
background: #f6f6f6;
border: 1px solid #000;
padding:4px 4px 4px 4px;
FILTER: progid: DXImageTransform.Microsoft.Shadow(color=#000000,direction=130,strength=5);
}
#overdiv{
top: 0;
left: 0;
z-index: 50;
width:100%;
display: none;
position: absolute;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity: 0.6;
opacity: 0.6;
}
</style>
<script language="JavaScript" type="text/javascript">
<!--
///////////////////////////////////////////////////////////
//很酷的一个弹出层效果
//作者：草墟
//联系QQ：371124434 E-mail:wjem8@126.com
//二十四小时天空工作室
http://www.24Hsky.com
//maxdiv---放大层特效
//mindiv---缩小层特效
//showdiv--触发层特效
//closediv--触发层关闭
//resizeDiv--改变窗体自动改变暗层宽
//其它参数自行体会吧，不懂的地方联系我，没有版权，随意修改
//CSS版本需要的请与我联系，另修改后希望能保留下我的联系方式
///////////////////////////////////////////////////////////
var i=0
function $(id){return document.getElementById(""+id+"")}
function documentwrite(src){return document.write(src);}
function maxdiv(width,id){
var objOverlay = $("writediv");
MWidth=objOverlay.style.pixelWidth+=i++
objOverlay.style.height=MWidth*whnum;
var toWidth=MWidth-MWidth*(width/MWidth);
if(MWidth<width){setTimeout('maxdiv('+width+','+id+')',1)}else{
objOverlay.style.width=objOverlay.style.pixelWidth-toWidth;
objOverlay.innerHTML=$(""+id+"").innerHTML;
}
}
function mindiv(distype){
var objOverlay = $("writediv");
objOverlay.innerHTML="";
MWidth=objOverlay.style.pixelWidth-=i--
if(MWidth<0){MWidth=0;i=10;}
objOverlay.style.height=MWidth*whnum;
if(MWidth>0){setTimeout('mindiv('+distype+')',1)}else{
if(distype!=1){objOverlay.style.display = "none";}
overdiv.style.display = "none";
}
}
documentwrite("<div id=\"overdiv\"></div>");
function showdiv(objOverlay,id,width,height,left,top){
whnum=height/width;
var objOverlay = $(""+objOverlay+"");
var sdocWidth = document.body.clientWidth;
var sdocHeight = document.body.clientHeight;
objOverlay.style.left=sdocWidth/3-document.body.scrollLeft;
if(top==""){objOverlay.style.top = 100-sdocHeight; }else{objOverlay.style.top =top;}
objOverlay.innerHTML="";
objOverlay.style.display = "block";
$("binwin").style.position = "relative";
overdiv.style.display = "block";
overdiv.style.width = ""+sdocWidth+"";
overdiv.style.height = ""+sdocHeight+"";
maxdiv(width,id);
}
function closediv(width,height,distype){
whnum=height/width;
mindiv(distype);
}
function resizeDiv(){
var sdocWidth = document.body.clientWidth;
if(sdocWidth<=760){sdocWidth="760";}
$("overdiv").style.width = ""+sdocWidth+"";
}
-->
</script>
</head>
<body onresize=resizeDiv()>
<div id="body">
<table width="760" height="600" border="0" align="center" >
<tr>
<td align="center" valign="middle">
<span class="move" >
<font color="#FF6600" class=alink><b>点击我弹给你看</b></font></span><br />
<br />
<br />
<br />
<br />
<a href="http://www.24Hsky.com" target="_blank">二十四小时天空工作室
http://www.24Hsky.com</a></td>
</tr>
</table>
<span id="binwin"><div id="writediv"></div>
<div id="1024" style="display: none;"><p>弹出DIV层内容,记得要在这里设一个关闭DIV层按钮哦</p>
<p align="center"><span class="move" >
<font color="#FF6600" class=alink><b>关闭DIV层</b></font></span></p>
</div></span>
</div>
</body>
</html>
