• 透明遮罩层


    HTML代码
    <input type="button" value="订阅 " class="bookbtn" id="bookmailtop1">

    <dl class="pop_dl" id="pol_dl_mail" >
    <dt><span>关闭</span></dt>
    <dd>
    <ul class="bmail_ok">
    <li>
    <h4>邮件订阅成功!</h4>
    <span>优惠信息将每天及时发送到您的邮箱。</span></li>
    <li>• 收不到邮件?有可能被误判为垃圾邮件了,请到垃圾邮件文件夹找找。</li>
    <li>• 如不想继续收每日提醒邮件,您可以在邮件中随时取消订阅。</li>
    </ul>
    </dd>
    </dl>
    <div id="popbg" ></div>

    CSS代码
    /* CSS 遮罩弹窗 */
    #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;}

    .pop_dl
    {margin:0 auto;POSITION: absolute; z-index:9999999;display:none; border:1px solid #decea9; background-color:#fff; width:400px;}
    .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; }
    .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;}
    .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;}
    .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;}
    .pop_dl dd
    { padding:15px;}


    .bmail_ok
    {background:url(ok_bg.gif) no-repeat 0 0; color:#C90809; margin:10px 25px;padding-left:70px;}
    .bmail_ok li
    { margin-bottom:10px; padding-top:10px;line-height:18px;}
    .bmail_ok h4
    {font-family:simhei,arial,sans-serif; font-size:18px; }
    .bmail_ok span
    { color:#666;}

    JAVASCRIP代码
    <script type="text/javascript">

    //弹出对话框关闭操作
    $('.pop_dl>dt>span').click(function(){
    $(
    "#popbg").fadeOut();
    $(
    '.pop_dl').fadeOut();
    });
    $(
    '#bookmailtop1').click(function(){
    popdiv(
    "#pol_dl_mail","400","auto",0.2);
    });

    function popdiv(popdiv,width,height,alpha){
    var A = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var D = 0;
    D
    = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    if (D == 0) {
    D
    = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
    }
    var topheight = (A + (D - 300) / 2)-100 + "px";
    alert(A);alert(D);alert(topheight);
    $(
    "#popbg").css({height:$(document).height(),filter:"alpha(opacity="+alpha+")",opacity:alpha})
    $(
    "#popbg").fadeIn();
    //$(popdiv).removeClass();
    //$(popdiv).attr("class","pop_out ");
    $(popdiv).css({left:(($(document).width())/2-(parseInt(width)/2))+"px",top:topheight});
    $(popdiv).fadeIn();
    }
    </script>
  • 相关阅读:
    揆首:以极客的思维做云诺
    [置顶] iOS学习笔记47——图片异步加载之EGOImageLoading
    wxWidgets初学者导引(3)——wxWidgets应用程序初体验(PDF版及附件下载)
    Win7 下用 VS2015 编译最新 openssl(1.0.2j)包含32、64位debug和release版本的dll、lib(8个版本)
    十问华为战略营销总裁徐文伟
    Debug与Release有时候确实不一致
    COM实践经验
    [置顶] (游戏编程-04)JAVA版雷电(奇迹冬瓜)
    第23章 COM和ActiveX(COM可以实现跨进程跨机器的函数调用)
    用Delphi即时判断当前的网络的连接方式
  • 原文地址:https://www.cnblogs.com/zengxiangzhan/p/1871372.html
Copyright © 2020-2023  润新知