JS+CSS实现Div弹出窗口同时背景变暗的方法
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法。分享给大家供大家参考。具体实现方法如下：
<html>
<head>
<title>JS+CSS实现的Div弹出窗口，同时背景变暗</title>
<script>
function locking(){
document.all.ly.style.display="block";
document.all.ly.style.width=document.body.clientWidth;
document.all.ly.style.height=document.body.clientHeight;
document.all.Layer2.style.display='block';
}
function Lock_CheckForm(theForm){
document.all.ly.style.display='none';document.all.Layer2.style.display='none';
return false;
}
</script>
<styletype="text/css">
<!--
.STYLE1{font-size:12px}
a:link{
color:#000;
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:none;
}
-->
</style>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
</head>
<body>
<palign="center">
<inputtype="button"value="弹出DIV"onClick="locking()"/>
</p>
<divid="ly"style="position:absolute;top:0px;filter:alpha(opacity=60);background-color:#777;
z-index:2;left:0px;display:none;">
</div>
<!-- 浮层框架开始 -->
<divid="Layer2"align="center"style="position:absolute;z-index:3;left:expression((document.body.offsetWidth-540)/2);top:expression((document.body.offsetHeight-170)/10);
background-color:#fff;display:none;">
<tablewidth="540"height="300"border="0"cellpadding="0"cellspacing="0"style="border:0 solid #e7e3e7;
border-collapse:collapse;">
<tr>
<tdstyle="background-color:#73A2d6;color:#fff;padding-left:4px;padding-top:2px;
font-weight:bold;font-size:12px;"height="10"valign="middle">
<divalign="right"><ahref=JavaScript:;class="STYLE1"onclick="Lock_CheckForm(this);">[关闭]</a> </div></td>
</tr>
<tr>
<tdheight="130"align="center">
<br><br><hr><palign="center"><fontcolor=red>本特效收集于互联网，只为兴趣与学习交流，不作商业用途。来源：毛票票</font></p>
</td>
</tr>
</table>
</div>
<!-- 浮层框架结束-->
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。