怎么让层居中

senliy 2008-09-25 03:57:57

怎么让层(DIV)居中
在页面中,任意点击一个按扭或一个链接
弹出一个窗口(层),而这个弹出一个窗口(层)就会在页面的中间显示

...全文

1697 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

xyq1986 2008-09-26

打赏
举报

用jQuery的plug-in,thickbox.js

l_jiayou 2008-09-26

打赏
举报

<!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=gb2312" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
window.onload=function(){
var test=document.getElementById("test");
var width=parseInt(test.style.width);
var height=parseInt(test.style.height);
test.style.top="50%";
test.style.left="50%";
test.style.marginLeft=(width/2*-1)+"px";
test.style.marginTop=(height/2*-1)+"px";
}
</script>
<body>
<div id="test" style="width:100px;height:50px; position:absolute; border:solid 1px green; top:0px; left:0px;">aaaaaaaaaaaaaaabbbbbbbbb<br />
ccccccccccccddddddddddddddddddddddd
</div>
</body>
</html>

西安风影 2008-09-25

打赏
举报

<html>

<body>

<style>

#warp{

  position: absolute;

  width:500px;

  height:400px;

  left:50%;

  top:50%;

  margin-left:-250px;

  margin-top:-200px;

  border: solid 1px red;

}

</style>

<body>

  <div id="warp" style="display:none"></div>

  <input type="button" value="Test" onclick="document.getElementById('warp').style.display='block'" />

</body>

</html>

width:500px;
height:400px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-200px;
注意margin-left和margin-top分别是width和height的一半可以准确定位在页面中间

king5281273 2008-09-25

打赏
举报

<SCRIPT LANGUAGE="JavaScript">
var s = "网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域宽："+ document.body.offsetWeight +" (包括边线的宽)";
s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;
s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;
s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
alert(s);
</SCRIPT>

liuyilidan 2008-09-25

打赏
举报

事件可以是你自己的事件

liuyilidan 2008-09-25

打赏
举报

var iNodeWidth = parseInt(document.getElementById("对象ID").style.width);
var iNodeHeight= parseInt(document.getElementById("对象ID").style.height);
window.onscroll = function()
{
var iNowLeft = (parseInt(document.body.clientWidth)/2-iNodeWidth/2)+parseInt(document.body.scrollLeft);
var iNowTop = (parseInt(document.body.clientHeight)+/2-iNodeHeight/2)+parseInt(document.body.scrollHeight);
document.getElementById("对象ID").style.left = iNowLeft;
document.getElementById("对象ID").style.top = iNowTop;
}

liuyilidan 2008-09-25

打赏
举报

var iNodeWidth = parseInt(document.getElementById("对象ID").style.width);
var iNodeHeight= parseInt(document.getElementById("对象ID").style.height);
window.onscroll = function()
{
var iNowLeft = (parseInt(document.body.clientWidth)/2-iNodeWidth/2)+parseInt(document.body.scrollLeft);
var iNowTop = (parseInt(document.body.clientHeight)+/2-iNodeHeight/2)++parseInt(document.body.scrollHeight);
document.getElementById("对象ID").style.left = iNowLeft;
document.getElementById("对象ID").style.top = iNowTop;
}

cloudgamer 2008-09-25

打赏
举报

http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html

参考一下

阿云ivan 2008-09-25

打赏
举报

var w=500;//div的宽
var h=600;//div的高
var l=screen.width/2-w/2; //计算出来的居中的left
var t=screen.height/2-h/2; //计算出来的居中的top

dln1234 2008-09-25

打赏
举报

<html>
<hrad>
<style>
div{position:absolute;width:100;height:0;
left:expression((document.body.clientWidth-this.offsetWidth)/2);
top:expression((document.body.clientHeight-this.offsetHeight)/2);}
</style>
<script type="text/javascript">
function Div_cl(){document.getElementById("div_cx").style.display="block";}
function Div_cll(){document.getElementById("div_cx").style.display="none";}
</script>
</head>
<body>
<input type="button" value="我要找找" onclick="Div_cl()"/>
<input type="button" value="我要关掉你" onclick="Div_cll()"/>
<a href="#" onclick="Div_cl()">我要去连接你</a>
<div style="display:none" id="div_cx"><table width="246" height="240" border="1">
<tr>
<td bordercolor="#FF6633" bgcolor="#FFFF00">
</div></td>
</tr>
</table></div>
</body>
</html>
小例子！！！！

senliy 2008-09-25

打赏
举报

刚学,还给点提示吧
谢谢

geek007 2008-09-25

打赏
举报

给点提示，其他的自己写吧
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;

div1.style.marginTop=TopPosition;

NULL 博文链接：https://shoushounihao.iteye.com/blog/1955513

jquery实现让弹出层绝对居中。

浮动层居中的对话框效果演示,效果还不错浮动层居中的对话框效果演示,效果还不错浮动层居中的对话框效果演示,效果还不错

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

js弹出层居中可移动 js弹出层居中可移动