center popup div

伊苏

浏览: 111489 次
性别:
来自: 深圳

最近访客更多访客>>

liuqu11

xphoenix

rubskin

shanmeimeia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

css html

popup center div

<html>
	<head>
		<title>div 100% height</title>
		<style>
			html, body {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}
			#t {
				position: absolute;
				left: 5%;
				top: 5%;
				border: 1px solid #777;
				height: 90%;
				width: 90%;
			}
		</style>
		<script>
			var isIE;
			function showList(txt){
				//for non-IE browser
				var fixX=0;
				var fixY=0;
				if(isIE){
					fixX=0;
					fixY=0;
				}
				var e=document.getElementById("divList");
				var x=txt.offsetLeft;
				var y=txt.offsetTop;
				var w=txt.offsetWidth;
				var h=txt.offsetHeight;
				e.style.display="block";
				//it's adjust prefect for chrome, it should adjust again if for FireFox or IE
				e.style.left=2+"px";
				e.style.top=-2+"px";
				e.style.width=w-2+"px";
				e.style.height=100+"px";
			}
			function popupDiv(e){
				e.style.display="block";
				
				e.style.left="50%";
				e.style.top="50%";
				e.style.marginLeft=-e.offsetWidth/2+"px";
				e.style.marginTop=-e.offsetHeight/2+"px";
			}
			function selectItem(e){
				var txt=e.innerHTML;
				var e=document.getElementById("txt");
				e.value=txt;
				document.getElementById("divList").style.display="none";
			}
			window.onload=function(){
				document.getElementById('lblBrowser').innerHTML=navigator.appName+", "+navigator.appVersion;
				var str=navigator.appName;
				var reg=/internet\ explorer/i;
				if(reg.test(str))
					isIE=true;
			}
		</script>
	</head>
	<body>
		<div id="t">	
			100% height div<br />
			browser: <label id="lblBrowser"></label><br />
			<input type="button" value="popup center div" onclick="popupDiv(document.getElementById('divCenter'))" />
		</div>
		<div id="divCenter" style="position: absolute; display: none; width: 300px; height: 200px; border: 1px solid blanchedalmond;">
			<!-- <div>		for the bug about IE marginLeft -50% --->
				Hi, where are you travel this year?<br />
				<input type="text" id="txt" name="txt" onclick="showList(this)" /><br />
				<div id="divList" style="display: none; border: 1px solid #777; position: relative;">
					<ul>
						<li onclick="selectItem(this)">SINGAPORE</li>
						<li onclick="selectItem(this)">MALAYSIA</li>
						<li onclick="selectItem(this)">INDONISIA</li>
					</ul>
				</div>
				<input type="button" value="close" onclick="document.getElementById('divCenter').style.display='none';" />
			<!--</div>--->
		</div>
	</body>
</html>

it's respond incorrect in IE, the input text will go away into left, I believe it's the bug of IE, cause by margin left,
so the solution is add a div as container for it. try to remove the annotation. now it compatible in IE, FF, Chrome.
final code:


<html>
	<head>
		<title>div 100% height</title>
		<style>
			html, body {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}
			#t {
				position: absolute;
				left: 5%;
				top: 5%;
				border: 1px solid #777;
				height: 90%;
				width: 90%;
			}
		</style>
		<script>
			var isIE;
			function showList(txt){
				//for non-IE browser
				var fixX=0;
				var fixY=0;
				var fixW=0;
				if(isIE){
					fixX=-2;
					fixY=0;
					fixW=2;
				}
				var e=document.getElementById("divList");
				var x=txt.offsetLeft;
				var y=txt.offsetTop;
				var w=txt.offsetWidth;
				var h=txt.offsetHeight;
				e.style.display="block";
				//it's adjust prefect for chrome, it should adjust again if for FireFox or IE
				e.style.left=2+fixX+"px";
				e.style.top=-2+fixY+"px";
				e.style.width=w-2+fixW+"px";
				e.style.height=100+"px";
			}
			function popupDiv(e){
				e.style.display="block";
				
				e.style.left="50%";
				e.style.top="50%";
				e.style.marginLeft=-e.offsetWidth/2+"px";
				e.style.marginTop=-e.offsetHeight/2+"px";
			}
			function selectItem(e){
				var txt=e.innerHTML;
				var e=document.getElementById("txt");
				e.value=txt;
				document.getElementById("divList").style.display="none";
			}
			window.onload=function(){
				document.getElementById('lblBrowser').innerHTML=navigator.appName+", "+navigator.appVersion;
				var str=navigator.appName;
				var reg=/internet\ explorer/i;
				if(reg.test(str))
					isIE=true;
			}
		</script>
	</head>
	<body>
		<div id="t">	
			100% height div<br />
			browser: <label id="lblBrowser"></label><br />
			<input type="button" value="popup center div" onclick="popupDiv(document.getElementById('divCenter'))" />
		</div>
		<div id="divCenter" style="position: absolute; display: none; width: 300px; height: 200px; border: 1px solid blanchedalmond;">
			<div>
				Hi, where are you travel this year?<br />
				<input type="text" id="txt" name="txt" onclick="showList(this)" /><br />
				<div id="divList" style="display: none; border: 1px solid #777; position: relative;">
					<ul>
						<li onclick="selectItem(this)">SINGAPORE</li>
						<li onclick="selectItem(this)">MALAYSIA</li>
						<li onclick="selectItem(this)">INDONISIA</li>
					</ul>
				</div>
				<input type="button" value="close" onclick="document.getElementById('divCenter').style.display='none';" />
			</div>
		</div>
	</body>
</html>

the result as below:

chrome1