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

前端技术 2023/09/06 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>     </div></td>
            </tr>
            <tr>
                <td height=\"130\" align=\"center\">
<br><br><hr><p align=\"center\"><font color=red>本特效收集于互联网，只为兴趣与学习交流，不作商业用途。来源：phpstudy</font></p>
                </td>
            </tr>
        </table>
    </div>
    <!--  浮层框架结束-->
</body>
</html>

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

本文地址：https://www.stayed.cn/item/16152

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案