//以下为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+'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(), $.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; 100%}
.loading{ background:no-repeat 50% 10% url("../images/icon/pageloading.gif"); 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>