透明遮罩层

cucugbgb

HTML代码

1. <input type="button" value="订阅 " class="bookbtn" id="bookmailtop1">
   
2. <dl class="pop_dl" id="pol_dl_mail" >
   
3.   <dt><span>关闭</span></dt>
   
4.   <dd>
   
5.     <ul class="bmail_ok">
   
6.       <li>
   
7.         <h4>邮件订阅成功！</h4>
   
8.         <span>优惠信息将每天及时发送到您的邮箱。</span></li>
   
9.       <li>• 收不到邮件？有可能被误判为垃圾邮件了，请到垃圾邮件文件夹找找。</li>
   
10.       <li>• 如不想继续收每日提醒邮件，您可以在邮件中随时取消订阅。</li>
    
11.     </ul>
    
12.   </dd>
    
13. </dl>
    
14. <div id="popbg" ></div>

复制代码

css代码：

1. /* CSS 遮罩弹窗 */
   
2. #popbg {BACKGROUND: #000; FILTER: alpha(opacity=50); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; opacity: 0.5; z-index:9999998;display:none;}   
   
3. .pop_dl {margin:0 auto;POSITION: absolute; z-index:9999999;display:none; border:1px solid #decea9; background-color:#fff; width:400px;}
   
4. .pop_dl dt { border-bottom:1px solid #decea9; height:39px;text-align:right; padding-right:10px; font-size:14px;background:url(close.gif) no-repeat 374px 12px;background-color:#f7e9cf; }
   
5. .pop_dl dt span { display:block; height:16px; line-height:16px;  cursor:pointer; width:44px; float:right; text-align:left; margin-top:11px;* margin-top:13px !important;*margin-top:13px;}
   
6. .pop_dl dt div { display:block; height:16px; line-height:16px;  cursor:pointer; width:44px; float:right; text-align:left; margin-top:11px;* margin-top:13px !important;*margin-top:13px;}
   
7. .pop_dl dt b { float:left;font-family:arial,sans-serif; font-size:18px; line-height:20px; margin-top:11px;* margin-top:13px !important;*margin-top:13px; font-weight:normal; margin-left:15px;}
   
8. .pop_dl dd { padding:15px;}.bmail_ok {background:url(ok_bg.gif) no-repeat 0 0; color:#C90809;  margin:10px 25px;padding-left:70px;}
   
9. .bmail_ok li { margin-bottom:10px; padding-top:10px;line-height:18px;}
   
10. .bmail_ok h4 {font-family:simhei,arial,sans-serif; font-size:18px; }.bmail_ok span { color:#666;}

复制代码

JAVASCRIP代码：

1. <script type="text/javascript">
   
2. //弹出对话框关闭操作
   
3. $('.pop_dl>dt>span').click(function(){
   
4.     $("#popbg").fadeOut();
   
5.      $('.pop_dl').fadeOut();
   
6. });
   
7. $('#bookmailtop1').click(function(){
   
8. popdiv("#pol_dl_mail","400","auto",0.2);
   
9. });
   
10. function popdiv(popdiv,width,height,alpha){
    
11.     var A = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    
12.     var D = 0;
    
13.     D = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    
14.     if (D == 0) {
    
15.     D = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
    
16.     }
    
17.      var topheight = (A + (D - 300) / 2)-100 + "px";
    
18.      alert(A);alert(D);alert(topheight);
    
19.     $("#popbg").css({height:$(document).height(),filter:"alpha(opacity="+alpha+")",opacity:alpha})
    
20.     $("#popbg").fadeIn();
    
21.     //$(popdiv).removeClass();
    
22.     //$(popdiv).attr("class","pop_out ");
    
23.     $(popdiv).css({left:(($(document).width())/2-(parseInt(width)/2))+"px",top:topheight});
    
24.     $(popdiv).fadeIn();
    
25. }
    
26. </script>

复制代码