这篇文章主要介绍了 JS+CSS 实现 Div 弹出窗口同时背景变暗的方法, 是一款比较典型的 javascript 操作弹出窗口的技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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>
- 本特效收集于互联网,只为兴趣与学习交流,不作商业用途。来源:phperz
- </font>
- </p>
- </td>
- </tr>
- </table>
- </div>
- <!-- 浮层框架结束-->
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: