使用css和最少的javascript用div模拟弹出窗口(Lightbox, Greybox, Thickbox)
2010-01-17 17:35
633 查看
背景介绍:实现用最少的Javascript代码实现模拟窗口(以下称为:子页面),使父窗口(以下称为:父页面)不在激活中
实现思路:当触发弹出子页面DIV时,在父页面和子页面中间添加一个和父页面同样大小的DIV层,并调整其透明度;当关闭子页面时取消子页面并取消透明层
实现代码:
参考文章:
1.Javascript实现步骤文章
2.本文参考原文
实现思路:当触发弹出子页面DIV时,在父页面和子页面中间添加一个和父页面同样大小的DIV层,并调整其透明度;当关闭子页面时取消子页面并取消透明层
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <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.8; opacity:.80; filter: alpha(opacity=80); } .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> </head> <body> <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p> <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> <div id="fade" class="black_overlay"></div> </body> </html>
参考文章:
1.Javascript实现步骤文章
2.本文参考原文
相关文章推荐
- 使用JavaScript和CSS弹出一个窗口
- 用css+div+javascript模拟模态窗口(可拖动)
- javascript用DIV模拟弹出窗口_窗体滚动跟随
- javascript用DIV模拟弹出窗口_窗体滚动跟随
- JavaScript 用DIV模拟弹出窗口并跟随窗体滚动
- div+css模拟弹出窗口
- JavaScript 用DIV模拟弹出窗口并跟随窗体滚动
- 超图使用javascript在地图上标记点,点击时并弹出窗口
- DIV模拟弹出窗口(支持拖动)
- JS+CSS实现Div弹出窗口同时背景变暗的方法
- 使用javascript调用CRM内部弹出窗口(分配案例)
- 用DIV完美模拟createPopup 弹出窗口(脚本之家修正版),支持Firefox,ie,chrome
- 使用div仿javascript模态窗口
- 用DIV模拟弹出窗口--窗体滚动跟随
- 使用javascript判断IE是否阻止弹出窗口
- 用DIV模拟弹出窗口--窗体滚动跟随--丁学
- [转]创建一个JavaScript弹出DIV窗口层的效果
- javascript+div+css模拟alert效果和confirm效果
- 使用div仿javascript模态窗口
- JS+CSS实现带关闭按钮DIV弹出窗口的方法