您的位置：首页 > Web前端 > JQuery

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

2013-04-05 16:22 253 查看
//以下为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>




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航