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({width: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(); } }