Goaler's BLOG

正好要用到，感觉网上现成的用起来不合自己的需求，于是乎自己动手弄了一个！网上有很多，比较有名的如lightbox，但是感觉不是文件太大或太多就是按自己的要求修改起来不方便（当然，用别人的代码建议还是要保留别人的版权），部分代码参考自网络。实现了兼容IE8、Firefox、Safari、Opera
由于只有IE8的测试环境，所以没有测试在其它IE版本下是否正常！有空的不妨测试一下！
以下是JS代码：

var clientWidth = window.innerWidth /*W3C*/ || document.documentElement.clientWidth /*std IE*/ || document.body.clientWidth/*IE quirk mode*/;
var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

function makeMASK() {
	var maskDIV = document.createElement('div');
	maskDIV.id = 'DIV_MASK';
	maskDIV.style.position = 'absolute';
	maskDIV.style.filter = 'Alpha(Opacity=30)';
	maskDIV.style.opacity = 0.3;
	maskDIV.style.backgroundColor = '#000000';
	maskDIV.style.width = '100%';
	maskDIV.style.height = window.document.documentElement.scrollHeight + 'px';
	maskDIV.style.top = '0px';
	maskDIV.style.left = '0px';
	maskDIV.style.zIndex = '1000';
	document.body.appendChild(maskDIV);
}

function maskDIVClose() {
	var mDIV = document.getElementById('DIV_MASK');
	if (mDIV) {
		document.body.removeChild(mDIV);
	}
}

function ShowDIV(divID,divTitle,divContent,dWidth,dHeight) {
	makeMASK();
	var iDiv = document.createElement('div');
	var divHeader = document.createElement('div');
	var divBody = document.createElement('div');
	
	divHeader.id = divID+'_Header';
	divBody.id = divID+'_Body';
	
	iDiv.appendChild(divHeader);
	iDiv.appendChild(divBody);
	document.body.appendChild(iDiv);

	iDiv.id = divID;
	iDiv.style.position = 'fixed';
	iDiv.style.width = dWidth+'px';
	iDiv.style.zIndex = '1001';
	iDiv.style.border = '3px solid #ffcc00';
	iDiv.style.backgroundColor = '#ffffff';

	divHeader.innerHTML = '<div class="CSS_divHeader"><span style="float:left;">■ '+divTitle+'</span><span style="float:right;cursor:pointer;font-size:16px;" onclick="CloseDIV(\''+divID+'\')" title="关闭">×</span></div>';
	
	divBody.innerHTML = '<div class="CSS_divBody">'+divContent+'</div>';
	divBody.style.height = dHeight+'px';
	divBody.style.overflow = 'auto';
	
	iDiv.style.top = Math.round((clientHeight - divBody.offsetHeight) / 2) + 'px';
	iDiv.style.left = Math.round((clientWidth - iDiv.offsetWidth) / 2) + 'px';

	return iDiv;
}

function CloseDIV(nDIV) {
	var nDIV = document.getElementById(nDIV);
	if (nDIV) {
		document.body.removeChild(nDIV);
	}
	maskDIVClose();
}

var clientWidth = window.innerWidth /*W3C*/ || document.documentElement.clientWidth /*std IE*/ || document.body.clientWidth/*IE quirk mode*/;<br/>var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;<br/><br/>function makeMASK() {<br/> var maskDIV = document.createElement('div');<br/> maskDIV.id = 'DIV_MASK';<br/> maskDIV.style.position = 'absolute';<br/> maskDIV.style.filter = 'Alpha(Opacity=30)';<br/> maskDIV.style.opacity = 0.3;<br/> maskDIV.style.backgroundColor = '#000000';<br/> maskDIV.style.width = '100%';<br/> maskDIV.style.height = window.document.documentElement.scrollHeight + 'px';<br/> maskDIV.style.top = '0px';<br/> maskDIV.style.left = '0px';<br/> maskDIV.style.zIndex = '1000';<br/> document.body.appendChild(maskDIV);<br/>}<br/><br/>function maskDIVClose() {<br/> var mDIV = document.getElementById('DIV_MASK');<br/> if (mDIV) {<br/> document.body.removeChild(mDIV);<br/> }<br/>}<br/><br/>function ShowDIV(divID,divTitle,divContent,dWidth,dHeight) {<br/> makeMASK();<br/> var iDiv = document.createElement('div');<br/> var divHeader = document.createElement('div');<br/> var divBody = document.createElement('div');<br/> <br/> divHeader.id = divID+'_Header';<br/> divBody.id = divID+'_Body';<br/> <br/> iDiv.appendChild(divHeader);<br/> iDiv.appendChild(divBody);<br/> document.body.appendChild(iDiv);<br/><br/> iDiv.id = divID;<br/> iDiv.style.position = 'fixed';<br/> iDiv.style.width = dWidth+'px';<br/> iDiv.style.zIndex = '1001';<br/> iDiv.style.border = '3px solid #ffcc00';<br/> iDiv.style.backgroundColor = '#ffffff';<br/><br/> divHeader.innerHTML = '<div class="CSS_divHeader"><span style="float:left;">■ '+divTitle+'</span><span style="float:right;cursor:pointer;font-size:16px;" onclick="CloseDIV(\''+divID+'\')" title="关闭">×</span></div>';<br/> <br/> divBody.innerHTML = '<div class="CSS_divBody">'+divContent+'</div>';<br/> divBody.style.height = dHeight+'px';<br/> divBody.style.overflow = 'auto';<br/> <br/> iDiv.style.top = Math.round((clientHeight - divBody.offsetHeight) / 2) + 'px';<br/> iDiv.style.left = Math.round((clientWidth - iDiv.offsetWidth) / 2) + 'px';<br/><br/> return iDiv;<br/>}<br/><br/>function CloseDIV(nDIV) {<br/> var nDIV = document.getElementById(nDIV);<br/> if (nDIV) {<br/> document.body.removeChild(nDIV);<br/> }<br/> maskDIVClose();<br/>}
还有两个CSS：

.CSS_divHeader {
	font-family: 微软雅黑,Arial, Helvetica, sans-serif;	_font-family: Arial, Helvetica, sans-serif;	padding:3px;background:#C8DBF6;	height:20px;line-height:18px;font-size:12px;border-bottom:1px solid #0093D9;
}
.CSS_divBody {
	clear:both;font-family: 微软雅黑,Arial, Helvetica, sans-serif;	_font-family: Arial, Helvetica, sans-serif;font-size:12px;padding:3px;
}

.CSS_divHeader {<br/> font-family: 微软雅黑,Arial, Helvetica, sans-serif; _font-family: Arial, Helvetica, sans-serif; padding:3px;background:#C8DBF6; height:20px;line-height:18px;font-size:12px;border-bottom:1px solid #0093D9;<br/>}<br/>.CSS_divBody {<br/> clear:both;font-family: 微软雅黑,Arial, Helvetica, sans-serif; _font-family: Arial, Helvetica, sans-serif;font-size:12px;padding:3px;<br/>}
调用方法：

var strTitle = '测试标题';
var strContent = '测试内容';
ShowDIV('testDIV',strTitle,strContent,560,220);

var strTitle = '测试标题';<br/>var strContent = '测试内容';<br/>ShowDIV('testDIV',strTitle,strContent,560,220);<br/>
点击这里下载源文件