`

弹出层居中问题版1

htmlxhtmlcssjavascriptjs 
阅读更多
1、居中弹出层css控制问题版 
<!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>居中弹出层css控制问题版</title>
<style type="text/css">
* {margin:0; padding:0;}
body {height:3000px;width:3000px;}
/* 如果不设置body属性 ，则就在页面中间 */
#div1 {position:absolute;top:50%;left:50%;width:400px;height:300px;background:#CCC; margin-left:-200px;margin-top:-150px;}
</style>

</head>

<body>
<div id="div1"></div>
</body>
</html>


2、弹出层高度居中 
<!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>弹出层高度居中--ie/chrome下抖动</title>
<style type="text/css">
* {margin:0; padding:0;}
body {height:3000px;width:3000px;}
#div1 {position:absolute; left:50%; width:400px; height:300px; background:#CCC; margin-left:-200px;}
</style>
<script>
 
window.onload=window.onscroll=window.onresize=function ()
{    //IE 6+,firefox 兼容
	//document.documentElement.scrollTop   
	 //chrome
	//document.body.scrollTop  兼容
	//document.title = document.documentElement.scrollTop + " , " + document.body.scrollTop;

	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	
	document.title = scrollTop;
 
	var oDiv=document.getElementById('div1');
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';
	
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>


3、弹出层宽度居中 
<!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>弹出层宽度居中--ie/chrome下抖动</title>
<style type="text/css">
* {margin:0; padding:0;}
body {height:3000px;width:3000px;}
#div1 {position:absolute; top:50%; width:400px; height:300px; background:#CCC; margin-top:-150px;}
</style>
<script>

window.onload=window.onscroll=window.onresize=function ()
{    //IE 6+,firefox 兼容
	// document.documentElement.scrollLeft 
	 //chrome 兼容
	//document.body.scrollLeft
	var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
	
	document.title = scrollLeft;
 
	var oDiv=document.getElementById('div1'); 
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
	oDiv.style.left=scrollLeft+(document.documentElement.clientWidth-oDiv.offsetWidth)/2+'px';
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>


4、弹出层宽度和高度居中 
<!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>弹出层宽度和高度居中--ie/chrome下抖动</title>
<style type="text/css">
* {margin:0; padding:0;}
body {height:3000px;width:3000px;}
#div1 {position:absolute; width:400px; height:300px; background:#CCC; }
</style>
<script type="text/javascript">
 
window.onload=window.onscroll=window.onresize=function ()
{    //IE 6+,firefox 兼容
	//document.documentElement.scrollTop  ,  document.documentElement.scrollLeft 
	 //chrome 兼容
	//document.body.scrollTop , document.body.scrollLeft
	//document.title = document.documentElement.scrollTop + " , " + document.body.scrollTop;
	
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
	
	document.title = scrollLeft + " , " + scrollTop;
	
	var oDiv=document.getElementById('div1');
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
	oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';
	oDiv.style.left=scrollLeft+(document.documentElement.clientWidth-oDiv.offsetWidth)/2+'px';
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

5、对联应用，适用高度和宽度出现滚动条的情况 
<!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>IE6下抖动</title>
<style>
/* 
	此版本基本可以适用大多数要求，IE6下稍微的抖动是可以接受的，而且宽度一般不会有滚动条
    除IE6下都可以满足也没需求
*/
body {height:3000px;width:3000px;}
#div1 {
	width:200px;height:200px;background:#CCC;
	position:fixed;/* FF Chrome IE7*/
	_position:absolute;/*IE6*/
	right:0;
	top:50%;
	margin-top:-100px;/*FF Chrome IE7 该值为本身高的一半*/
	_margin-top:0;/* IE6下使用的是absolute 要清掉mragin-top的值,位置必须在原来margin-top 之后*/
}
</style>
<script>
/* 判断是否是IE6,只有IE6才会执行此段代码，但是会出现抖动问题！一般可以满足所有要求了！ */ 
if(window.navigator.userAgent.indexOf('MSIE 6')!=-1){
	//IE6
	window.onload=window.onscroll=window.onresize=function (){
		var oDiv=document.getElementById('div1');
		var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
		var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
		
		oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';
		/* 处理宽度有滚动条的情况,如果body 的宽度没出现滚动条,这段代码可以不要,这里只是以防万一 */ 
		oDiv.style.left=scrollLeft+(document.documentElement.clientWidth-oDiv.offsetWidth)+'px';
	};
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>
0
顶
0
踩
分享到：
| Oracle一个表update 锁住了,怎么杀掉 ses ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics