弹出窗口的兼容方案

Posted by 小寒 on 八月 30, 2010 Leave a comment Go to comments

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
	html, body {
		margin: 0;
		padding: 0;
	}
	body {
	}
	#div1 {
		height: 2000px;
	}
	#floatedLayer {
		position: fixed;
		_position: absolute;
	}
	</style>
</head>
<body>
	<div id="floatedLayer">
		<iframe src="demo.html" width="580" height="542" frameborder="no"></iframe>
	</div>
	<div id="div1"></div>
	<script type="text/javascript">
		var floatedLayer = document.getElementById("floatedLayer");
		function adjustPopupWin() {
			var height = document.documentElement.clientHeight,
				width = document.documentElement.clientWidth;
			floatedLayer.style.left = Math.max((width - floatedLayer.offsetWidth) / 2, 0) + "px";
			floatedLayer.style.top = Math.max((height - floatedLayer.offsetHeight) / 2, 0) + "px";
		}
	</script>
	<!--[if IE 6]>
	<script type="text/javascript">
		function adjustPopupWin() {
			var height = document.documentElement.clientHeight,
				width = document.documentElement.clientWidth;
			floatedLayer.style.left = Math.max((width - floatedLayer.offsetWidth) / 2, 0) + document.documentElement.scrollLeft + "px";
			floatedLayer.style.top = Math.max((height - floatedLayer.offsetHeight) / 2, 0) + document.documentElement.scrollTop + "px";
		}
		window.onscroll = adjustPopupWin;
	</script>
	<![endif]-->
	<script type="text/javascript">
		window.onresize = adjustPopupWin;
		adjustPopupWin();
	</script>
</body>
</html>

CSS, HTML, JavaScript position: fixed