master

分支 (2)

管理

管理

master

dev_test

web-test
/
jquery实现弹出层完美居中效果.html

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<style type="text/css">
			/*弹出层的STYLE*/
			html,
			body {
				height: 100%;
				margin: 0px;
				font-size: 12px;
			}

			.mydiv {
				background-color: #ff6;
				border: 1px solid #f90;
				text-align: center;
				line-height: 40px;
				font-size: 12px;
				font-weight: bold;
				z-index: 99;
				width: 300px;
				height: 120px;
				left: 50%;
				/*FF IE7*/
				top: 50%;
				/*FF IE7*/
				margin-left: -150px !important;
				/*FF IE7 该值为本身宽的一半 */
				margin-top: -60px !important;
				/*FF IE7 该值为本身高的一半*/
				margin-top: 0px;
				position: fixed !important;
				/*FF IE7*/
				position: absolute;
				/*IE6*/
				_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2:
					/*IE6*/
					document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
				/*IE5 IE5.5*/
			}

			.bg {
				background-color: #ccc;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				/*FF IE7*/
				filter: alpha(opacity=50);
				/*IE*/
				opacity: 0.5;
				/*FF*/
				z-index: 1;
				position: fixed !important;
				/*FF IE7*/
				position: absolute;
				/*IE6*/
				_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2:
					/*IE6*/
					document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
				/*IE5 IE5.5*/
			}

			/*The END*/
		</style>
		<script type="text/javascript">
			function showDiv() {
				document.getElementById('popDiv').style.display = 'block';
				document.getElementById('bg').style.display = 'block';
			}

			function closeDiv() {
				document.getElementById('popDiv').style.display = 'none';
				document.getElementById('bg').style.display = 'none';
			}
		</script>
	</head>
	<body>
		<div id="popDiv" class="mydiv" style="display:none;">标题<br />你懂得<br />
			<a href="javascript:closeDiv()">关闭窗口</a></div>
		<div id="bg" class="bg" style="display:none;"></div>
	</body>