---- 淘宝优惠券 ----欢迎到论坛交流 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

一个简单的弹出层

javascript 蚂蚁 1991℃ 0评论

html

<a href="javascript:void(0);" class="btn-submit">我要报名</a>
  <div id="fullbg"></div>
  <div id="dialog">
    <p class="close"><a href="#" onclick="closeBg();">关闭</a>
    </p>
    <p class="til">您已成功报名</p>
    <p class="content">2015成都汽车消费展</p>
    <p class="btn"><button onclick="closeBg()">确认</button></p>
    <!--<div>正在加载,请稍后....</div>-->
  </div>

css

#fullbg { 
      background-color:#000; 
      left:0; 
      opacity:0.6; 
      position:absolute; 
      top:0; 
      z-index:4; 
      filter:alpha(opacity=60); 
      -moz-opacity:0.6; 
      -khtml-opacity:0.6; 
    } 
    #dialog { 
      background-color:#fff; 
      height:auto;
      left:50%; 
      margin:-200px 0 0 -200px; 
      padding:1px;
      padding-bottom: 15px;  
      position:fixed !important; /* 浮动对话框 */ 
      position:absolute; 
      top:50%; 
      width:500px; 
      z-index:5; 
      border-radius:5px; 
      display:none; 
    } 
    #dialog p { 
      margin:0 0 12px; 
      height:24px; 
      line-height:24px; 
    } 
    #dialog .til{font-family: "microsoft yahei";font-size: 24px;text-align: center;border-bottom: 1px solid #ddd;padding-bottom: 10px;color: #e94715;}
    #dialog .content{font-family: "microsoft yahei";font-size: 36px;text-align: center;border-bottom: 1px solid #ddd;padding-bottom: 20px;color: #222;margin-top: 25px;}
    #dialog p.btn{text-align: center;}
    #dialog button{padding: 5px 10px;display: inline-block;margin: 0 auto;}
    #dialog p.close { 
      text-align:right; 
      padding-right:10px; 
    } 
    #dialog p.close a { 
      color:#ddd; 
      text-decoration:none; 
    } 

js

//显示灰色 jQuery 遮罩层 
       function showBg() {
        var bh = jQuery("body").height();
        var bw = jQuery("body").width();
        jQuery("#fullbg").css({
          height: bh,
          width: bw,
          display: "block"
        });
        jQuery("#dialog").show();
      }
        //关闭灰色 jQuery 遮罩 
        function closeBg() {
          jQuery("#fullbg,#dialog").hide();
        }
        $('.btn-submit').click(function(){
          showBg();
        })

提示:你可以先修改部分代码再运行。

转载请注明:有爱前端 » 一个简单的弹出层

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情