标签：style blog color 使用 width os
遮罩层其实就是一个占据整个页面的半透明效果的页面元素，一般用div实现。页面中实现遮罩层，无非就是为了让用户只能操作弹出窗口的内容，而不允许操作弹出窗口外的内容。
在实现时，我使用了两个div,一个遮罩层id=overlay，一个是弹出窗id=dialog。
1 <body> 2 <div id="overlay"></div> 3 <div id="dialog">点击弹出窗可以隐藏遮罩层</div> 4 <a id="show" href="#">点击弹窗</a> 5 </body>
有了页面结构后，接下来应该实现的是设置这些页面元素的样式，使遮罩层为透明的效果，并且开始时遮罩层和弹出窗口层都隐藏，实现的css如下：
#overlay{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=30);z-index:9;-moz-opacity:0.5; -khtml-opacity:0.5; } #dialog{display:none;position:absolute;left:50%;top:50%;width:400px;height:400px;margin:-200px 0 0 -200px;border:5px solid rgba(0,0,0,0.6);border-radius:5px;background:#fff;z-index:15;}
要注意的是设置#dialog的z-index值要比#overlay的高，而#overlay的z-index要比一般的元素的高，这样才能达到遮罩住其它页面元素的效果，不允许用户再操作除了弹出窗的其它内容。
然后用jQuery来实现弹出和隐藏的动作吧，代码如下：
1 $(document).ready(function(){ 2 $("#show").click(function(){ 3 showDg(); 4 }); 5 $("#dialog").click(function(){ 6 hideDg(); 7 }); 8 }); 9 //显示遮罩层和弹出窗 10 function showDg(){ 11 $("#overlay").show(); 12 $("#dialog").show(100); 13 }; 14 //隐藏遮罩层和弹出窗 15 function hideDg(){ 16 $("#overlay").hide(); 17 $("#dialog").hide(); 18 }; 19 </script>
标签：style blog color 使用 width os
原文地址：http://www.cnblogs.com/beyondfengyu/p/3817835.html
