一个稍微高级的弹出层

弹出内容由后台给。
双击空白地方关闭,
监听窗口大小更改
可以到控制台看看效果

zdialog.show('你的标题','你的内容')

html

<a href="javascript:void(0);" onclick="zdialog.show()" class="btn-submit">我要报名</a>

css

.zdialog-bg { 
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; 
} 
.zdialog-content { 
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; 
} 
.zdialog-content p { 
margin:0 0 12px; 
height:24px; 
line-height:24px; 
} 
.zdialog-content .til{font-family: "microsoft yahei";font-size: 24px;text-align: center;border-bottom: 1px solid #ddd;padding-bottom: 10px;color: #e94715;}
.zdialog-content .content{font-family: "microsoft yahei";font-size: 36px;text-align: center;border-bottom: 1px solid #ddd;padding-bottom: 20px;color: #222;margin-top: 25px;}
.zdialog-content p.btn{text-align: center;}
.zdialog-content button{padding: 5px 10px;display: inline-block;margin: 0 auto;}
.zdialog-content p.close { 
text-align:right; 
padding-right:10px; 
} 
.zdialog-content p.close a { 
color:#ddd; 
text-decoration:none; 
} 

js

//显示灰色 jQuery 遮罩层 
       var zdialog={
        hideFunc:null,
        _fullbg:null,
        _dialog:null,
        getFullBG:function(){
          var fullbg=this._fullbg;
          if(fullbg==null){
            fullbg=jQuery('<div class="zdialog-bg"></div>');
            fullbg.dblclick(zdialog.hide);
            jQuery(document.body).append(fullbg);
            this._fullbg=fullbg;
          }
          var bh = jQuery("body").height();
          var bw = jQuery("body").width();
          fullbg.css({
            height: bh,
            width: bw,
            display: "block"
          });
          return fullbg;
        },
        getDialog:function(){
          var dialog=this._dialog;
          if(dialog==null){
            dialog=jQuery('<div class="zdialog-content"><p class="close"><a href="#" onclick="zdialog.hide()">关闭</a></p><p class="til"></p><p class="content"></p><p class="btn"><button onclick="zdialog.hide()">确认</button></p></div>');
            jQuery(document.body).append(dialog);
            this._dialog = dialog;
          }
          return dialog;
        },
        show:function(title,content,hideFunc) {
          this.getFullBG();
          var dialog=this.getDialog();
          if(title){
            dialog.find('.til').html(title);
          }
          if(content){
            dialog.find('.content').html(content);
          }
          if(hideFunc){
            this.hideFunc=hideFunc;
          }
          dialog.show();
          window.onresize=this.onresize;
        },
        hide:function(){
          zdialog._fullbg.hide();
          zdialog._dialog.hide();
          window.onresize=null;
          if(zdialog.hideFunc){
            zdialog.hideFunc();
          }
        },
        onresize:function(){
          var bh = jQuery("body").height();
          var bw = jQuery("body").width();
          zdialog._fullbg.css({
            height: bh,
            width: bw
          });
        }
       };

Tips:You can change the code before run.

THE END
分享
二维码
打赏
< <上一篇
下一篇>>