JQuery写的公用遮罩层+关闭遮罩层时执行委托事件

 //以下为JQuery代码 

$(function() {
    var isStrict = document.compatMode == "CSS1Compat";
   jQuery.extend({
       w: function() { var w = isStrict ? document.documentElement.scrollWidth : document.body.scrollWidth; return Math.max(w, $(window).width()); }
 , h: function() { var h = isStrict ? document.documentElement.scrollHeight : document.body.scrollHeight; return Math.max(h, $(window).height()); }
    });
 
});
 
function ShowDialog(url, tit, width, retrun) {
    $("body").append('<iframe class="BgDiv"></iframe>');
 
    var dialgId = 'Dialog_' + parseInt(Math.random() * 10000);
    var ifrmId = 'Iframe_' + parseInt(Math.random() * 10000);
    var dialgHtml = '<div class="DialogDiv" style="width:'+width+'px" id="' + dialgId + '"><h2>' + tit + '<a  style="cursor:pointer" id="dialogclose">关闭</a></h2><iframe src="' + url + '" id="' + ifrmId + '" class="DialogIframe" frameborder="0" scrolling="no" height="0"></iframe><div class="loading">正在加载</div></div>';
    $("body").append(dialgHtml);
 
    var frame = $("#" + ifrmId);
 
    var dialg = $("#" + dialgId);
 
   dialg.css({ "left": "50%", "width": width + "px", "margin-left": "-" + parseInt(width / 2) + "px" });
   
    $("#dialogclose").click(function() {
       closeDiv(dialg);
 
       if (typeof (retrun) == 'function')//执行委托
           retrun();
    });
 
   frame.load(function() {
       $(".loading").css({ display: "none" });
       frame.css({ "visibility": "inherit"});
       pagestyle(dialg, frame, width);
    });
 
    //注册窗体改变大小事件
   $(window).resize(function() {
       pagestyle(dialg, frame, width);
    });
 
}
 
function pagestyle(dialg, frame, width) //调用函数
{
    $(".BgDiv").css({ display: "block", height: $.h(), width: $.w() });//背景遮罩层
   
    var iHeight = frame.contents().find("body").height()+20; //对话窗口的高度;
   frame.attr("height", iHeight);
 
    var iTop = parseInt(($(window).height() - iHeight) / 2)-110; //获得窗口的垂直位置;
 
    if (iTop < 0) {//当前可见区域不够显示窗口
       iTop = document.documentElement.scrollTop;
    }
    else {
       iTop += document.documentElement.scrollTop;
    }
   dialg.css({ "top": iTop + "px"});
 
}
 
function closeDiv(obj) {
    $(".BgDiv").remove();
   obj.remove();
}

 //以下为css样式
.BgDiv{display:none; background-color:#e3e3e3; position:absolute; margin:0; z-index:111; left:0; top:0; border:0; opacity:0.6;filter: alpha(opacity=60);-moz-opacity:0.6;}
.DialogDiv{  top:20%; left:50%; margin:auto;color:#000000;position:absolute; z-index:111;background-color:#fff; border:1px #006699 solid; padding:1px;}
.DialogDiv h2{ margin:0; height:25px; color:#eee; font-size:14px; background-color:#006699; position:relative; padding-left:10px; line-height:25px;}
.DialogDiv h2 a{position:absolute; right:5px; font-size:12px; top:0px; color:red}
.DialogIframe{ overflow:hidden; width:100%}
.loading{ background:no-repeat 50% 10% url("../images/icon/pageloading.gif"); width:100%; padding-top:50px; padding-bottom:10px; text-align:center; }/*该图片为显示加载效果的动态图片*/

//调用示例

<script>

 var retrun = function() {
           window.location.reload();//关闭遮罩层后重新加载页面,该方法可以改用AJAX异步刷新
       }
</script> 
<html>
<input type="button" value="修改" onclick="ShowDialog('UserEdit.aspx?uid=<%#Eval("UserID")%>','修改用户',300,retrun)"/>
</html>







你可能感兴趣的:(jquery)