这篇文章主要介绍了 JS+CSS 实现带关闭按钮 DIV 弹出窗口的方法, 实例分析了 div 弹出层窗口的实现技巧, 非常具有实用价值, 具有一定参考借鉴价值, 需要的朋友可以参考下
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本文实例讲述了 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 程序设计有所帮助。
来源: