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


Posted in Javascript onMarch 04, 2015

本文实例讲述了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>本特效收集于互联网,只为兴趣与学习交流,不作商业用途。来源:三水点靠木</font></p>

                </td>

            </tr>

        </table>

    </div>

    <!--  浮层框架结束-->

</body>

</html>

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

Javascript 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 #Javascript
JavaScript中的关联数组问题
Mar 04 #Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 #Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 #Javascript
JavaScript设置获取和设置属性的方法
Mar 04 #Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 #Javascript
深入探讨javascript中的数据类型
Mar 04 #Javascript
You might like
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
JavaScript While 循环基础教程
2007/04/05 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
六个窍门助你提高Python运行效率
2015/06/09 Python
python K近邻算法的kd树实现
2018/09/06 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
django框架cookie和session用法实例详解
2019/12/10 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
司考复习计划
2015/01/19 职场文书
雷锋观后感
2015/06/10 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
Linux中sftp常用命令整理
2022/06/28 Servers
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android