JS+CSS实现带关闭按钮DIV弹出窗口的方法


Posted in Javascript onFebruary 27, 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: #FFFFFF;

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">

                </td>

            </tr>

        </table>

    </div>

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

</body>

</html>

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

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
详解AngularJS 模块化
Jun 14 Javascript
js实现图片懒加载效果
Jul 17 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
vue中的inject学习教程
Apr 24 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
Javascript writable特性介绍
Feb 27 #Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 #Javascript
JavaScript函数详解
Feb 27 #Javascript
浅谈JavaScript的事件
Feb 27 #Javascript
JS实现图片放大镜效果的方法
Feb 27 #Javascript
浅谈javascript中的instanceof和typeof
Feb 27 #Javascript
js实现有时间限制消失的图片方法
Feb 27 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
SVG描边动画
2017/02/23 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
python获取整个网页源码的方法
2020/08/03 Python
中专毕业生自我鉴定范文
2013/11/09 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS