首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js定位层的有关问题

2012-03-06 
js定位层的问题我现在做一个弹出层,但是存在定位不准确的问题比如我做一个Div,代码如下body/bodyscri

js定位层的问题
我现在做一个弹出层,但是存在定位不准确的问题

比如我做一个Div,代码如下

<body> </body> <script>
var   thisBox=document.createElement( "div ");
var   BorderColor= "red ";
var   BoxWidth=100;
var   BoxHight=100;
with   (thisBox)   {
setAttribute( "align ", "center ");
style.background   =   "white ";
style.border   =   "1px   solid   "   +   BorderColor;
style.position   =   "absolute ";
style.left   =   "50% ";
style.top   =   "50% ";
style.font= "12px/1.6em   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif ";
style.marginLeft   =   "-225px "   ;
style.marginTop   =   (WebForm_GetScrollY()-75)+ "px ";
style.width   =   BoxWidth   +   "px ";
style.height   =   BoxHight   +   "px ";
style.textAlign   =   "center ";
style.lineHeight   = "25px ";
style.zIndex   =   "10001 ";
innerText   =   "我是内容 ";
//禁止选取文字和右键
attachEvent( "oncontextmenu ",new   Function( "return   false "));
attachEvent( "ondragstart ",new   Function( "return   false "));
attachEvent( "onselectstart ",new   Function( "return   false "));
}
document.body.appendChild(thisBox);


function   WebForm_GetClentX()  
{
if   (typeof   window.pageYOffset   !=   'undefined ')   {
return   window.pageXOffset;
}
else   {
if   (document.documentElement   &&   document.documentElement.clientWidth)   {
return   document.documentElement.clientWidth;
}
else   if   (document.body)   {
return   document.body.clientWidth;
}
        }
return   0;
}
function   WebForm_GetClentY()  
{
if   (typeof   window.pageYOffset   !=   'undefined ')   {
return   window.pageYOffset;
        }
else   {
if   (document.documentElement   &&   document.documentElement.clientHeight)   {
return   document.documentElement.clientHeight;
}
else   if   (document.body)   {
return   document.body.clientHeight;
}
        }
return   0;
}
function   WebForm_GetScrollX()  
{
if   (typeof   window.pageYOffset   !=   'undefined ')   {
return   window.pageXOffset;
        }
else   {
if   (document.documentElement   &&   document.documentElement.scrollLeft)   {
return   document.documentElement.scrollLeft;
}
else   if   (document.body)   {
return   document.body.scrollLeft;
}
}
return   0;
}
function   WebForm_GetScrollY()  
{
if   (typeof   window.pageYOffset   !=   'undefined ')   {
return   window.pageYOffset;
}
else   {
if   (document.documentElement   &&   document.documentElement.scrollTop)   {


return   document.documentElement.scrollTop;
}
else   if   (document.body)   {
return   document.body.scrollTop;
}
}
return   0;
}
</script>

在一般情况下能显示在屏幕中央,但是有时层的内容过多,使层被拉大,层就不能显示在屏幕中央了,此时通过JS获得层的位置也不准确,请问高手有什么准确定位的方法

还有我要做一个遮蔽全屏幕的层,该如何写(在网上看到某些遮蔽层的代码,但是在网页上并不能完全遮蔽。自己想过将遮蔽层的右下脚与屏幕右下脚对齐,再用serTimeOut防止用户滚动屏幕,但是不知道如何写这段对齐的代码)

[解决办法]
未测试,仅供参考:
obj/需要定位的对象;
father/定位对象的父级元素;
居中的算法:obj.style.left=father.currentStyle.offsetWidth/2-obj.currentStyle.offsetWidth/2;
obj.style.top=fathre.currentStyle.offsetHeight/2-obj.currentStyle.offsetHeight/2

遮罩可以这样试试:设置层高宽够大,一直大到再大1个单位就会出现滚动条,另设置zInex足够大,最后,“再用serTimeOut防止用户滚动屏幕”,好像应该是让用它来设置你的层跟随滚动吧!?
[解决办法]
offsetHeight是不需要使用style的,直接写就可以
father.offsetWidth
[解决办法]
全屏幕可以用POPUP来做,但是只能支持IE,而且高版本的IE已经做限制了。
除了这个基本没什么别的办法。

http://www.cnblogs.com/0009/archive/2007/04/30/733737.html
我这个就是用popup做的
[解决办法]
t=t+ " <div id= 'module ' style= 'filter:alpha(opacity=0);position:absolute;z-index:2;width: "+document.body.clientWidth+ "px;height: "+document.body.clientHeight+ "px;left:0;top:0; '> ";
使用document.body.clientHeight不行么?偶一直都用的好好的啊。
不管跟不跟随,也不管拖不拖动滚动条都一样,不过缺点是层不能放在框架中。
我一般都是window.top.document.write(t),这样就不会有问题了。
另外我一般会在module中放一个等大的iframe,否则遮不住列表框的。

热点排行