CSS代码如下:
/*遮蔽罩*/
#mask{ position:absolute;left:0;top:0;border:2 solid red;text-align:center;background-color:black; filter:Alpha(opacity=20); opacity: 0.2;}
#popupContainer{ position:absolute; background:#E8F5FF;}
#popupControls img{ float:right;}
#popupControls{ width:20px;}
#popupTitle{ width:100%; float:left; color:#0E529D; }
#popupContainer{border:1px #8EC1EE solid; text-align:center;}
#popupContainer img{ cursor:pointer; height:20px; width:20px;}
#popupFrame{ margin-top:4px; border:1px #8EC1EE solid;}
#popupTitleBar{ height:20px; line-height:20px;border:1px #8EC1EE solid;background:url(../images/Calender_title_bg.jpg) repeat-x;}
JavaScript代码如下:
// JavaScript Document
document.getViewportHeight = function(){
if (window.innerHeight!=window.undefined) return window.innerHeight;
if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
if (document.body) return document.body.clientHeight;
// return window.undefined;
}
//得到浏览器显示的屏幕宽度
document.getViewportWidth = function(){
if (window.innerWidth!=window.undefined) return window.innerWidth;
if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth;
if (document.body) return document.body.clientWidth;
}
/**
* 遮罩层,组件的显示及隐藏
*/
Shade = {
mask: null,
container: null,
isIE6: null,
init: function () {
//判断浏览器是否是ie6或其以下版本
var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
this.isIE6 = true;
} else {
this.isIE6 = false;
}
//将遮罩层加入body
var popmask = document.createElement('div');
popmask.id = 'mask';
document.body.appendChild(popmask);
this.mask = document.getElementById("mask");
//将组件边框加入body
var popcont = document.createElement('div');
popcont.id = 'popupContainer';
// popcont.innerHTML = "<div id='popupInner'>" +
// "<div id='popupTitleBar'>" +
// "<div id='popupTitle'></div>" +
// "<div id='popupControls'>" +
// "<img src='/App_Them/images/close.gif' οnclick='Shade.hide();' id='popCloseBox' title='关闭'/>" +
// "</div></div>" +
// "<div id='popupFrame'>dd</div>";
popcont.innerHTML = "<div id='popupInner'>" +
"<table width='100%' border='0' height='25' cellpadding='0' cellspacing='0' id='popupTitleBar'>" +
"<tr><td id='popupTitle' align='center'></td>" +
"<td id='popupControls'>" +
"<img src='/images/close.jpg' οnclick='Shade.hide();' id='popCloseBox' title='关闭'/>" +
"</td></tr></table>" +
"<div id='popupFrame'>dd</div>";
document.body.appendChild(popcont);
this.container = document.getElementById("popupContainer");
},
setMaskSize: function () {
var theBody = document.body;
var fullHeight = document.getViewportHeight();
var fullWidth = document.getViewportWidth();
if (fullHeight > theBody.scrollHeight) {
this.popHeight = fullHeight;
} else {
this.popHeight = theBody.scrollHeight;
}
if (fullWidth > theBody.scrollWidth) {
this.popWidth = fullWidth;
} else {
this.popWidth = theBody.scrollWidth;
}
this.mask.style.height = this.popHeight + "px";
this.mask.style.width = this.popWidth + "px";
},
toCenter: function (conf) {
var s = this.container.style;
s.left = (document.getViewportWidth() - conf.width) / 2 + "px";
s.top = (document.getViewportHeight() - conf.height) / 2 + "px";
},
show: function (conf) {
//初始化
this.init();
//设置遮罩层的长度和宽度
this.setMaskSize()
//设置组件的标题
document.getElementById('popupTitle').innerHTML = conf.title;
//设置组件的长和宽
this.container.style.width = conf.width + "px";
this.container.style.height = conf.height + "px";
var frame = document.getElementById('popupFrame');
frame.style.width = (conf.width - 4) + "px";
frame.style.height = (conf.height - 31) + "px";
//将组件居中显示
this.toCenter(conf);
//设置组件内容
frame.innerHTML = conf.templete;
},
hide: function () {
//删除遮罩层
document.body.removeChild(this.mask);
//删除组件层
document.body.removeChild(this.container);
// document.execCommand('Refresh');
window.frames["iframe_right"].location.reload();
},
hidden: function () {
//删除遮罩层
document.body.removeChild(this.mask);
//删除组件层
document.body.removeChild(this.container);
window.frames["iframe_right"].location.reload();
}
}
前台页面调用的Js函数代码:
function method(id) {
var obj= {
//组件标题
title: "查看事务",
//组件的宽度
width: 500,
//组件的高度
height: 350,
//组件里面的内容
templete: "<form action='' method='get' class='formClass' >" +
"<table width='100%'>" +
"<tr>" +
"<td align='left' valign='top'><label ><iframe src='/manage/SelectSomething.aspx?id="+id+"' width='490' height='300' marginwidth='0' marginheight='0' frameborder='0' allowtransparency='true'></iframe></label></td>" +
"</tr>" +
"</table>" +
" </form>"
}
Shade.show(obj);
}