Ublue jQuery 弹出框 始终垂直于屏幕中间 完美兼容IE6

今天继续和大家分享一个jQuery弹出框的代码。代码本身很简单，最关键的问题就在于兼容性方面。

HTML CODE:

<a class="popBtn" href="javascript:void(0)">Click Me</a>

<div class="popLayer">
	<div class="popLayerTit">
		<h2>Title</h2>
		<i class="close">[ 关闭 ]</i>
	</div>
	<div class="popLayerCon">
		<p>Text or Other content</p>
	</div>
</div>
<div class="maskLayer"></div>

CSS CODE:

<style type="text/css">
*{ margin:0; padding:0;}
html{ background-image:url(body_bg.jpg);}
body{ font-size:12px; font-family:Arial; height:2000px;}
a{ text-decoration:none;}

.popBtn{ display:block; width:100px; margin:0 auto; text-align:center; padding:10px 0; color:#211F1E; border:1px solid #E59300; background:#F2BA00; text-shadow:1px 1px 1px #FAE585; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,0.5);}
.popBtn:hover{ color:#EEC000; border:1px solid #000; background:#1A1818; text-shadow:1px 1px 1px #000;}

.popLayer{ display:none; width:500px; border:2px solid #000; border-bottom:3px solid #000; background:#000; border-radius:2px; box-shadow:0 3px 6px rgba(0,0,0,0.5); position:fixed; left:50%; top:50%; z-index:999; 
	_top:expression(eval(
		document.compatMode && document.compatMode=='CSS1Compat') ?
		documentElement.scrollTop + (document.documentElement.clientHeight- this.offsetHeight)/2 : 
		document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2
	);
}
.popLayerTit{ width:100%; height:30px; color:#E19E00;margin-bottom:1px; background:#151515;}
.popLayerTit h2{ padding:5px 10px; font-size:14px; text-shadow:1px 1px 1px #000;}
.popLayerTit .close{ font-style:normal; cursor:pointer; position:absolute; top:7px; right:7px; text-shadow:0 0 3px rgba(255,213,0,0.8);}
.popLayerCon{ padding:10px; line-height:20px; color:#D4CFC0; border-top:1px solid #272626; ; background:#1B1919;}
.popLayerCon p{ text-indent:24px;}

.maskLayer{ display:none; width:100%; height:100%; position:absolute; top:0px; left:0px; background:#DF7A00; opacity:.1;}

.info{ font:14px/30px "Electrolize","Microsoft YaHei",Arial,Tahoma; width:100%; color:#E1A800; text-shadow:1px 1px 1px #000; text-align:center; margin:80px auto;}
.info a{ color:#E1A800;}
</style>
<!--[if IE 6]>
<style type="text/css">
body{ background-image:url(about:blank);background-attachment:fixed;}
.maskLayer{ filter:alpha(opacity=10);}
</style>
<![endif]--> 

JS CODE:

/*!
 * Ublue jQuery Dialog
 * Copyright (c) 2011, 梦幻神化 
 * http://www.bluesdream.com
 *
 * CreateTime: 2011.10.14
 * 
 * 请保留此信息，如果您有修改或意见可通过网站给我留言，也可以通过邮件形式联系本人。
 * Mail: hello@bluesdream.com
 */
$(function(){
	var $popBtn = $(".popBtn");
	var $popLayer = $(".popLayer");
	var $maskLayer = $(".maskLayer");
	var $popLayerClose = $(".close");
	var $popLayerTop = -($popLayer.outerHeight() / 2);
	var $popLayerLeft = -($popLayer.outerWidth() / 2);
	var $pageH = $(document).height(); //IE6不支持height:100%，所以为遮罩背景设一个固定高度

	$popBtn.click(function(){ //点击按钮
		$maskLayer.css({ "height":$pageH }).show(); //显示遮罩层
		if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { //判断IE6
			$popLayer.css({ "position":"absolute","marginLeft":( $popLayerLeft ) }).show();
		}else{
			$popLayer.css({ "marginTop":( $popLayerTop ),"marginLeft":( $popLayerLeft ) }).show();
		};
	});

	function cancelBubble(event) { //阻止事件冒泡
		event.stopPropagation();
	};
	function hideLyaer(event) {
		$popLayer.hide();
		$maskLayer.hide();
	};
	$popBtn.click(cancelBubble);
	$popLayer.click(cancelBubble);
	$popLayerClose.click(hideLyaer);
	$(document).click(hideLyaer);

});

DemoDownload