整个页面变暗的蒙版效果，带有半透明边框的弹窗，用在网站里一定很酷。
最初见与奢饰品购物网站YMALL，后边研究了下，自己做了这个实例。
技术要点：css中几种透明样式的使用。不同的样式在不同的浏览器中的兼容性不同，所以需要采取组合使用才能兼容多个浏览器。详见：http://www.cnblogs.com/xyyt/p/3477156.html
示例代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 <script src="http://code.jquery.com/jquery-latest.js"></script> 7 <style type="text/css"> 8 #Body{ z-index:1; display:block;height:1000px;} 9 #Cover{ z-index:999; position:fixed;_position:relative;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88000000',endColorstr='#88000000');background-color:rgba(0, 0, 0, 0.5);background:#000;opacity:0.5;filter:alpha(opacity=50);height:100%;left:0;top:0;display:block;width:100%;} 10 #Pop{z-index:10000;position: fixed;_position: relative;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3Fffffff',endColorstr='#3Fffffff');background-color: rgba(255,255,255,0.3);font-family: 微软雅黑; padding:10px;left: 40%;top:40%;} 11 .btnClose {width: 16px;height: 16px;position: absolute;overflow: hidden;right: 20px;top: 20px;background: url(../Images/Goods/Model/btn-bg.png) -73px 0px;cursor: pointer;} 12 .popContent {width: 309px;height: 172px;overflow: hidden;padding-left: 33px;background: white;} 13 .popMain *{position:relative;} 14 .popContent dl {height: 79px;overflow: hidden;} 15 .popContent dt {padding-top: 18px;height: 28px;} 16 .popContent dd {margin-left:0px; margin-top:5px;} 17 .f_20 {font-size: 20px;color:Black;} 18 .f_18 {font-size: 16px;} 19 .f_14 {font-size: 14px; color:#444} 20 .f_bold{ font-weight:bold;} 21 .f_red{color: #9C2C2C;} 22 .popContent b a, .popContent b a:visited {display: block;width: 98px;height: 23px;overflow: hidden;text-decoration: none;background-color:Black;color:White;padding:5px;text-align:center;} 23 .btnGoToPay{width:118px;height:32px; background-color:Black; color:#ddd; border:2px solid #ccc; font-size:16px;font-weight:bold; margin-left:18px; cursor:pointer;} 24 .btnGoToBuy{width:92px;height:25px;margin-left:18px; cursor:pinter; color:#444;} 25 </style> 26 <script language="javascript" type="text/javascript"> 27 function btnPop_onclick() { 28 var cover = "<div id='Cover' onclick='btnClose_onclick()'></div>"; 29 $("body").append(cover); 30 var pop = "<div id='Pop'></div>"; 31 $("body").append(pop); 32 $("#Pop").append("<div class='btnClose' onclick='return btnClose_onclick()'>X</div>" 33 + "<div class=' popMain'>" 34 + "<div class='popContent'>" 35 + "<dl class='f_black'>" 36 + "<dt class='f_20'>商品已成功添加到购物车！</dt>" 37 + "<dd class='f_14' >你的购物袋中共有<span href='#' class='f_red'>1</span> 件宝贝，合计：<span class='f_red f_16 f_bold'>￥173.00</span></dd></dl>" 38 + "<div style='margin-top:22px;'>" 39 + "<input class='btnGoToPay' type='button' value='立即结算' />" 40 + "<input class='btnGoToBuy' type='button' value='继续购物'/>" 41 + "</div></div></div>"); 42 } 43 function btnClose_onclick() { 44 $("#Cover").remove(); 45 $("#Pop").remove(); 46 } 47 </script> 48 </head> 49 <body> 50 <!--主体层--> 51 <h1>点击任意图片弹出弹窗，点击弹窗图片即可关闭弹窗</h1> 52 <br /> 53 <h3>弹窗弹出后，原窗体内容变暗，滚动鼠标滑轮，页面仍可滑动，但不可对原页面内容进行操作</h3> 54 <h3>点击弹窗后，弹窗消失，页面恢复初始状态</h3> 55 <div id="Body"> 56 <img style="cursor: pointer;" src="http://image.xzyd.net/66/image/ad/20140113/20140113200252.jpg" title='点击图片打开弹窗' onclick="return btnPop_onclick()"/> 57 </div> 58 </body> 59 </html>