//以下为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>