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根据像素点取位置示例
Jan 27 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
微信小程序实现watch监听
Jun 04 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判断所处服务器操作系统的类型
2013/06/20 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
Servlet面试题库
2015/07/18 面试题
资产经营总监岗位职责
2013/12/04 职场文书
校园之星获奖感言
2014/01/29 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
优秀班组事迹材料
2014/12/24 职场文书
大二学年个人总结
2015/03/03 职场文书
校长新学期致辞
2015/07/30 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers