JS+CSS实现Div弹出窗口同时背景变暗的方法

时间：2021-12-05 10:18:09|栏目：JavaScript代码|点击：次

本文实例讲述了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>
 
     <style type="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>
 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 
 </head>
 
 <body>
 
     <p align="center">
 
         <input type="button" value="弹出DIV" onClick="locking()" />
 
     </p>
 
     <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
 
          z-index: 2; left: 0px; display: none;">
 
     </div>
 
     <!--          浮层框架开始         -->
 
     <div id="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;" >
 
         <table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0    solid    #e7e3e7;
 
              border-collapse: collapse ;" >
 
             <tr>
 
                 <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
 
                      font-weight: bold; font-size: 12px;" height="10" valign="middle">
 
                      <div align="right"><a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">[关闭]</a> &nbsp;&nbsp;&nbsp;&nbsp;</div></td>
 
             </tr>
 
             <tr>
 
                 <td height="130" align="center">
 
 <br><br><hr><p align="center"><font color=red>本特效收集于互联网，只为兴趣与学习交流，不作商业用途。来源：脚本之家</font></p>
 
                 </td>
 
             </tr>
 
         </table>
 
     </div>
 
     <!--  浮层框架结束-->
 
 </body>
 
 </html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：javascript jquery对form元素的常见操作详解

栏目：JavaScript代码

下一篇：Bootstrap每天必学之面板

本文标题：JS+CSS实现Div弹出窗口同时背景变暗的方法

本文地址：http://www.codeinn.net/misctech/185837.html

更多JavaScript代码

JavaScript代码

JS+CSS实现Div弹出窗口同时背景变暗的方法

阅读排行

推荐教程