center popup div

最新推荐文章于 2022-03-12 15:06:59 发布

ys_r14

最新推荐文章于 2022-03-12 15:06:59 发布

阅读量136

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/ys_r14/article/details/84008665

版权

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

[img]http://dl.iteye.com/upload/attachment/544972/15f3b1ba-7216-33c0-ab54-18b9eea64d56.jpg[/img]

chrome2

[img]http://dl.iteye.com/upload/attachment/544974/83785259-6e7a-395d-a50b-8c89032e6a85.jpg[/img]

IE1

[img]http://dl.iteye.com/upload/attachment/544976/b2fb8c9c-fdbc-386a-a2d9-42313d7cb348.jpg[/img]

IE2

[img]http://dl.iteye.com/upload/attachment/544978/17a4597d-bf4e-35a7-b270-287f86454698.jpg[/img]