jQuery遮罩弹窗

HTML:

<p id="ok">单击这里显示</p>

JS:

$(document).ready(function(){
$(
"#ok").click(function(){
showBg();
addBox();
});
});
function showBg(){
var _body = $("body").eq(0);
$(
"html,body").css("overflow","hidden");
if($("#bg").length == 0){
_body.append(
"<div id=\"bg\"><iframe src=\"\" width=\"100%\" height=\"100%\" frameBorder=\"0\"></iframe></div>");
$(
"#bg").css({"background-color":"#000000","opacity":".5","filter":"alpha(opacity=50);","z-index":"100","position":"absolute","top":"0","width":_body.width(),"height":_body.height()});
$(
"#bg iframe").css({"opacity":"0","filter":"alpha(opacity=0);"});
}
else{
$(
"#bg").show();
}
}
function hiddenBg(){
$(
"html,body").css("overflow","auto");
$(
"#bg").hide();
$(
"#dialog").hide();
}
function addBox(){
var _body = $("body").eq(0);
if($("#close").length == 0){
_body.append(
"<div id=\"dialog\"><span id=\"close\" style=\"float:right;cursor:pointer;border:#333 solid 1px;\">×</span></div>");
$(
"#dialog").css({500,height:200,position:"absolute","z-index":"101",top:(_body.height() / 2 - 100),left:(_body.width() / 2 - 250),"background-color":"#ffffff"});
$(
"#close").click(function(){
hiddenBg();
});
}
else{
$(
"#dialog").show();
}
}

就是个备份

原文地址:https://www.cnblogs.com/ShepherdIsland/p/1808799.html