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

更新时间：2015年03月04日 15:14:56 作者：代码家园

这篇文章主要介绍了JS+CSS实现Div弹出窗口同时背景变暗的方法,是一款比较典型的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程序设计有所帮助。

您可能感兴趣的文章:

div当滚动到页面顶部的时候固定在顶部实例代码
使用Javascript实现了滚动页面时，DIV到达顶部时固定在顶部。在IE下效果有点闪，具体代码如下，感兴趣的朋友可以参考下哈
2013-05-05
GoJs连线绘图模板Link使用示例详解
这篇文章主要为大家介绍了GoJs连线绘图模板Link使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
微信小程序实现倒计时调用相机自动拍照功能
这篇文章主要为大家详细介绍了微信小程序实现倒计时调用相机自动拍照功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-06-06
谈一谈bootstrap响应式布局
这篇文章主要和大家谈一谈bootstrap响应式布局，本教程讲解如何在网页布局中应用响应式设计，感兴趣的小伙伴们可以参考一下
2016-05-05
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
“工欲善其事，必先利其器” 恩，这句话我觉得说的特别有道理，下面这篇文章主要给大家介绍了关于利用chrome浏览器进行js调试并找出元素绑定的点击事件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
2018-09-09
javascript中方便增删改cookie的一个类
把jquery.cookie.js改了一下，改成了纯javascript版本，以备我以后项目只需，增加了一个得到页面全部cookie键值的功能
2012-10-10
使用JavaScript库还是自己写代码？
有时候在写JavaScript添加到你的网页中的时候，你将需要决定是使用已有的可用的JavaScript库还是自己写所有代码。其中每个各有优缺点，因此没有任何一种方式对每个人来说都是绝对正确的选择。
2010-01-01
JS中promise化微信小程序api
这篇文章主要给大家通过代码实例分析了promise化微信小程序api的使用方法，对此有需要的朋友可以参考学习下。
2018-04-04
JavaScript常见的函数中的属性与方法总结
当定义和调用函数时，JavaScript 函数对象会自动具有一些特定的属性，本文为大家总结了一些常见的属性和方法，感兴趣的小伙伴可以了解一下
2023-05-05
使用JavaScript构建JSON格式字符串实现步骤
这篇文章将帮助你使用javascript来创建json格式字符串如果你需要通过web项目来构建json格式字符串的响应,感兴趣的各位可以参考下哈，希望可以帮助到你
2013-03-03