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程序设计有所帮助。