遮罩层 div弹出层
2014-09-01 15:23
232 查看
全页面遮罩层 & div弹出层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> <title>LIGHTBOX EXAMPLE</title> <style> * { margin:0; padding:0} html, body { height: 100%; width: 100%; font-size:12px} .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; padding: 6px 16px; border: 12px solid #D6E9F1; background-color: white; z-index:1002; overflow: auto;} .black_overlay { display: none; position: absolute;top:0%;left:0%;width:100%;height:100%; background-color:#f5f5f5; z-index:1001; -moz-opacity: 0.8; opacity:0.8; filter: alpha(opacity=80);} .close { float:right; clear:both; width:100%; text-align:right; margin:0 0 6px 0} .close a { color:#333; text-decoration:none; font-size:14px; font-weight:700} .con { text-indent:1.5pc; line-height:21px} </style> <script> function show(tag){ var light=document.getElementById(tag); var fade=document.getElementById('fade');//遮罩层 fade.style.width = document.documentElement.scrollWidth; //设置为全页面 fade.style.height = document.documentElement.scrollHeight; light.style.display='block'; fade.style.display='block'; } function hide(tag){ var light=document.getElementById(tag); var fade=document.getElementById('fade'); light.style.display='none'; fade.style.display='none'; } </script> </head> <body> <a href="javascript:void(0)" onclick="show('light')">打开1</a> <a href="javascript:void(0)" onclick="show('light2')">打开2</a> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div> 123424235 </div> <div id="light" class="white_content"> <div class="close"> <a href="javascript:void(0)" onclick="hide('light')"> 关闭</a> </div> <div class="con"> 内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容内容 </div> </div> <div id="light2" class="white_content"> <div class="close"> <a href="javascript:void(0)" onclick="hide('light2')"> 关闭</a> </div> <div class="con"> 内容2 </div> </div> <div id="fade" class="black_overlay"> </div> </body> </html>
相关文章推荐
- 带遮罩的div弹出层demo(可多层)
- Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作
- js遮罩层弹出div效果实现
- Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
- 遮罩效果|div弹出层|模式层
- html 锁定页面(js遮罩层弹出div效果)
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
- 弹出DIV层,可选择遮罩当前或全部页面
- 一个关于弹出登陆框的页面 用遮罩 div
- z-index解决弹出层遮罩层覆盖子div不能显示输出的问题
- DIV弹出层无法遮罩ActiveX控件的解决方案
- Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作
- jsp弹出div带有遮罩层
- JS 弹出遮罩层,内部为DIV
- js弹出层、遮罩、div层的几种效果
- Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
- html 锁定页面(js遮罩层弹出div效果)
- DIV弹出层无法遮罩ActiveX控件的解决方案
- JS弹出可移动的DIV对话框透明遮罩效果