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 参考教程
Dec 29 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
为什么node.js不适合大型项目
Apr 28 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 验证码的实现代码
2011/07/17 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
vue组件name的作用小结
2018/05/23 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
使用python为mysql实现restful接口
2018/01/05 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
运动会跳远广播稿5篇
2014/09/17 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
办护照工作证明
2014/10/01 职场文书
个人查摆剖析材料
2014/10/16 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python