首页 > 代码库 > 实现带背景遮罩的弹窗

实现带背景遮罩的弹窗

描述:
     实现有背景遮罩的弹窗,并且能够随着窗体的变化,响应式居中。

/*---背景遮罩---*/

.blackoverlay{    position: absolute;    background: #666;    overflow: hidden;    top: 0px;    left: 0px;}
/*---弹窗主体---*/
.whitecontent{    position: absolute;    z-index: 1002;    background: White;    display: none;}

/*---弹窗函数---*/
obj:弹窗主体的ID

function popwindow(obj) {    var bw = $("body").width();    var bh = $("body").height();          /*IE*/    var ww=document.documentElement.clientWidth;    var wh=document.documentElement.clientHeight;     /*Chrome*/    var ww=window.innerWidth;    var wh=window.innerHeight;    var cw = $("#"+obj).width();    var ch = $("#"+obj).height();    var left = (Math.abs(ww - cw) / 2);    var top = (Math.abs(wh - ch) / 2);    $(".blackoverlay").css("width", bw).css("height", bh).show();    $("#"+obj).css("top", top).css("left", left).show();}

/*---窗体变化时—*/

$(window).resize(function(){     if($(".whitecontent").is(":visible")){            popwindow(".whitecontent:visible");         }});

/*---关闭弹窗---*/

function closepop() {    $(".blackoverlay").css("display", "none");    $(".whitecontent:visible").css("display", "none");}

实现带背景遮罩的弹窗