这篇文章主要为大家详细介绍了 js 实现非常棒的弹出 div,具有一定的参考价值,感兴趣的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <html>
- <head>
- <meta charset="utf-8" />
- <title>
- LIGHTBOX EXAMPLE
- </title>
- <style>
- .black_overlay{ display: none; position: absolute; top: 0%; left: 0%;
- width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity:
- 0.6; opacity:.60; filter: alpha(opacity=60); } .white_content { display:
- none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%;
- padding: 16px; border: 16px solid orange; background-color: white; z-index:1002;
- overflow: auto; }
- </style>
- <script>
- function one() {
- document.getElementById('light').style.display = 'block';
- document.getElementById('fade').style.display = 'block'
- }
- function two() {
- document.getElementById('light').style.display = 'none';
- document.getElementById('fade').style.display = 'none'
- }
- </script>
- </head>
- <body>
- <p>
- 可以根据自己要求修改CSS样式
- <a href="javascript:void(0)" onclick="one()">
- 点击这里打开窗口
- </a>
- </p>
- <div id="light" class="white_content">
- This is the lightbox content.
- <a href="javascript:void(0)" onclick="two()">
- Close
- </a>
- </div>
- <div id="fade" class="black_overlay">
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0525/331417.html