jquery弹出层,并且遮罩透明,随页面滚动
2012-01-19 13:30
495 查看
<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0; } #main { height:1800px; padding-top:90px; text-align:center; } #fullbg { background-color:Gray; left:0px; opacity:0.5; position:absolute; top:0px; z-index:3; filter:alpha(opacity=50); /* IE6 */ -moz-opacity:0.5; /* Mozilla */ -khtml-opacity:0.5; /* Safari */ } #dialog { background-color:#FFF; border:1px solid #888; display:none; height:200px; left:50%; margin:-100px 0 0 -100px; padding:12px; position:fixed !important; /* 浮动对话框 */ position:absolute; top:50%; width:200px; z-index:5; }#dialog p {margin:0 0 12px; } #dialog p.close { text-align:right; } </style> <body> <div id="main"> <a href="#" onclick="showBg();">点击这里看 jQuery 遮罩层效果.</a> </div> <!-- jQuery 遮罩层 --> <div id="fullbg"></div> <!-- end jQuery 遮罩层 --> <!-- 对话框 --> <div id="dialog"> <p class="close"><a href="#" onclick="closeBg();">关闭</a></p> <p>正在加载,请稍后...</p> </div> <!-- jQuery 遮罩层上方的对话框 --> </body> </html> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> //显示灰色 jQuery 遮罩层 function showBg() { var bh = $("body").height(); var bw = $("body").width(); $("#fullbg").css({ height:bh, width:bw, display:"block" }); $("#dialog").show(); } //关闭灰色 jQuery 遮罩 function closeBg() { $("#fullbg,#dialog").hide(); } </script> <!--[if lte IE 6]> <script type="text/javascript"> // 浮动对话框 $(document).ready(function() { var domThis = $('#dialog')[0]; var wh = $(window).height() / 2; $("body").css({ "background-image": "url(about:blank)", "background-attachment": "fixed" }); domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"'); }); </script> <![endif]-->
本文出自 “lai坚技术博客” 博客,请务必保留此出处http://laijian.blog.51cto.com/2579619/766244
相关文章推荐
- jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
- Jquery弹出框以及跟随页面滚动
- jQuery阻止移动端遮罩层后页面滚动
- jQuery+css+html实现页面遮罩弹出框
- 用jQuery实现页面遮罩弹出框
- jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不变
- 手机端当页面弹出遮罩层的时候,遮罩后面的页面禁止滚动且“锁定当前位置”
- 移动端和PC端遮罩层弹出后,页面禁止滚动的解决方法
- JQuery实现在页面中央弹出带有动画透明的弹出层
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
- jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动
- jQuery+css+html实现页面遮罩弹出框
- jQuery+css+html实现页面遮罩弹出框
- 用jq让移动端和PC端遮罩层弹出后页面禁止滚动
- 弹出遮罩层,禁止蒙层底部页面跟随滚动
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
- 用jQuery实现页面遮罩弹出框
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
- jQuery+css+html实现页面遮罩弹出框
- jquery 弹出层垂直居中不动 页面可滚动兼容ie6