`

弹出层居中问题版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 ...
评论
发表评论

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

相关推荐

    弹出层居中

    标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题，特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中，"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...

    ASP.NET 绝对居中弹出层

    ASP.NET绝对居中弹出层是一种常见的Web应用交互设计，常用于显示重要的信息或进行用户交互，如登录对话框、消息提示或表单提交。在ASP.NET框架中，结合JavaScript和CSS，我们可以创建一个高性能、高用户体验的弹出...

    js弹出层居中可移动

    1. **如何使弹出层居中显示**：这涉及到计算浏览器窗口的大小，并根据这些信息调整弹出层的位置。 2. **如何使弹出层可被拖动**：这需要监听鼠标事件，并根据用户的鼠标移动来调整弹出层的位置。 #### 三、具体实现...

    jQuery弹出层垂直居中效果

    此外，如果弹出层包含动态内容，如异步加载的数据，可能需要在内容加载完成后再次调用 `centerPopup` 函数，以确保弹出层始终居中。 在实际开发中，还可以利用CSS3的 `transform` 属性配合 `translateX` 和 `...

    DIV始终居中的半透明弹出层.rar

    在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先，`DIV`是HTML中的一个块级元素，常用于创建网页布局结构。在本...

    jquery实现让弹出层绝对居中

    为了让弹出层在页面中看起来更加专业且用户体验良好，通常会要求它们能够自动居中显示。jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化DOM操作，包括实现弹出层的居中对齐。本文将详细介绍如何使用...

    mvc5jquery弹出层居中并显示遮罩

    在本项目"Mvc5jQuery弹出层居中并显示遮罩"中，开发者利用Microsoft的ASP.NET MVC5框架和jQuery库，实现了弹出窗口的居中显示以及半透明遮罩效果，提升了用户界面的美观度和易用性。 首先，我们来了解一下MVC5框架...

    弹出层（遮罩层）弹出页面垂直居中

    弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。

    兼容ie，FF，chrome，opera的弹出层居中js

    标题“兼容ie，FF，chrome，opera的弹出层居中js”所指的就是一个JavaScript实现的弹出层（popup layer）定位代码，它能在Internet Explorer（IE）、Firefox（FF）、Chrome以及Opera这些主流浏览器中实现居中显示。...

    jQuery手机端点击弹出层固定居中代码

    这里主要定义了弹出层的样式，使其在页面上居中并具有适当的透明度，同时确保内容自适应： ```css .modal { display: none; /* 隐藏初始状态 */ position: fixed; /* 固定定位 */ z-index: 1; /* 设置z-index以...

    div弹出层 定位问题的 处理

    3. **居中对齐**：让`div`弹出层居中，可以采用以下几种方式： - 使用负边距：通过计算`div`的宽度和高度的一半，然后设置负的`margin-left`和`margin-top`来实现。 - 使用`transform`属性：设置`transform: ...

    弹出层居中显示

    点击文字或按钮，弹出一个遮罩层并居中显示，单击其他地方，可以自动关闭遮罩层

    不错的弹出层居中效果锁定屏幕

    在网页设计中，"不错的弹出层居中效果锁定屏幕" 是一个常见的需求，尤其是在创建模态框、对话框或提示信息时。这个标题描述了一个简单而实用的解决方案，允许弹出层（通常是div元素）在页面中央显示，并且能够固定在...

    jQuery点击遮罩弹出层固定居中代码.zip

    3. **CSS样式应用**：为了让弹出层居中，我们需要设置合适的CSS样式。弹出层的宽度应根据内容动态调整，而垂直居中可以通过计算窗口高度和弹出层高度，然后设置适当的`margin-top`实现。水平居中可以使用`margin: ...

    jquery js css弹出居中的遮罩层

    在网页开发中，创建一个居中显示且具有遮罩效果的弹出层是常见的需求，尤其是在需要用户关注特定信息或进行交互操作时。本压缩包提供了两种实现方式：一种是基于JavaScript（JS）和CSS，另一种是利用jQuery库结合CSS...

    遮罩弹出层

    遮罩弹出层 ; charset=utf-8" /&gt; &lt;title&gt;jquery弹出层鼠标点击弹出层可浮动在...弹出层当鼠标点击文字或图片弹出层，弹出层浮动在屏幕上可以随浏览器上下滚动，弹出层可自动居中在页面中间。jquery下载。" /&gt; &lt;/head&gt;

    jQuery弹出层垂直居中效果.zip

    `jQuery弹出层垂直居中效果`是解决这一问题的一种方案，它旨在确保不论弹出层的大小如何，都能在用户屏幕中精确地垂直居中显示。这种效果可以提升用户体验，使得弹出信息更易于阅读和交互。 jQuery是一种广泛使用的...

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