弹出内容由后台给。
双击空白地方关闭，
监听窗口大小更改
可以到控制台看看效果
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
});
}
};
提示：你可以先修改部分代码再运行。
转载请注明：有爱前端 » 一个稍微高级的弹出层
