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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
vue-router的两种模式的区别
May 30 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 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程序中的常见漏洞进行攻击
2006/10/09 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
jquery maxlength使用说明
2011/09/09 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Python如何读写字节数据
2020/08/05 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
门卫班长岗位职责
2013/12/15 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
初中新生军训方案
2014/05/13 职场文书
交通事故委托书范本精选
2014/10/04 职场文书