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 相关文章推荐
非主流的textarea自增长实现js代码
Dec 20 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
JS document form表单元素操作完整示例
Jan 13 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
php自动加载代码实例详解
2021/02/26 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
对python以16进制打印字节数组的方法详解
2019/01/24 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
市场营销方案范文
2014/03/11 职场文书
机关单位动员会主持词
2014/03/20 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
违纪检讨书范文
2015/01/27 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL