弹出层居中问题版1

最新推荐文章于 2024-08-03 22:09:54 发布

stairheaven

最新推荐文章于 2024-08-03 22:09:54 发布

阅读量70

点赞数

分类专栏： javascript html css web前端文章标签： html xhtml css javascript js ViewUI

web前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

18 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

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>

stairheaven

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹出层居中问题版1

1、居中弹出层css控制问题版[code="java"]居中弹出层css控制问题版* {margin:0; padding:0;}body {height:3000px;width:3000px;}/* 如果不设置body属性，则就在页面中间 */#div1 {position:absolute;top:50%;left:50%;width:400px...
复制链接

扫一扫

专栏目录