浏览 21557 次
|
锁定老帖子 主题：关于弹出层的定位问题
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-06-24
我遇到这样一个问题：
1.我的页面因为内容多，所以垂直和水平方向都有滚动条 2.我有一个递交按钮，在网页的最下方 3.我点提交按钮，会弹出一个提示层，比如是否确认删除。 4.问题是，我怎样让这个弹出层显示在当前窗口的正中间。即使网页被缩放。甚至还其他浏览器也是如此。 我当前的做法： var sWidth,sHeight;//网页的实际宽，高度，包括含滚动条的部分 var msgw,msgh //弹出层的宽，高度 sWidth=document.body.scrollWidth; sHeight=document.body.scrollHeight; /××我现在要定位这个弹出层的位置 ×这个计算公式是我在页面全屏的情况下 ×不断的调试就算得出来得。正好在网页中间。 ×但是肯定得结果是一缩放网页就不是在中间了。 ×/ msgObj.style.left = (sWidth+msgw)/2+ "px"; msgObj.style.top = sHeight-sHeight/4+ "px"; 请求帮助 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2007-06-24
加上scrollTop和scrollLeft的值
|
| 返回顶楼 | |
|
发表时间：2007-06-24
我试了，似乎不行，也许是我理解错了
能具体一点吗 |
| 返回顶楼 | |
|
发表时间：2007-06-25
把上面的代码做成一个函数
绑定到 window.onresize 事件; |
| 返回顶楼 | |
|
发表时间：2007-06-25
我是用了prototype.js中的函数实现了
<script src='prototype.js' /></script>
<script language="javascript" type="text/javascript">
function createDiv(){
var nDiv = document.createElement('div');
nDiv.id ='nDiv';
Element.setStyle(nDiv,{
position : 'absolute',
width: '200px',
height:'200px',
background : 'black',
top : document.body.scrollHeight/2-100+'px',//要居中还要算上你的div的面积
left : document.body.scrollWidth/2-100+'px'
});
document.body.appendChild(nDiv);
}
Event.observe(window,'resize',function(){
if(!$('nDiv'))
createDiv();
else
$('nDiv').setStyle({
top : document.body.scrollHeight/2-100+'px',
left : document.body.scrollWidth/2-100+'px'
})
})
</script>
|
| 返回顶楼 | |
|
发表时间：2007-06-25
/***********************************************************
*winnie *弹出层的封装对象 *popLayerObj.show(sHTML<html 代码>,nWidth<弹出层的宽>,nHeight<弹出层的高>) -----方法描述：打开弹出层 *popLayerObj.close() -----方法描述：关闭弹出层 *popLayerObj.showPrompt(msg<提示信息>,flag<可选默认1 1=确定 2=确定 取消>) -----方法描述：系统提示框 *popLayerObj.loading(msg<可选默认为‘正在处理数据’ 加载信息>); -----方法描述：加载进度条 *popLayerObj.ofush() -----方法描述：如果你重写了popLayerObj.createBefore popLayerObj.closeEnd 可以调用这个方法清除 ***********************************************************/ var popLayerObj={}; popLayerObj.show = function (sHTML,nWidth,nHeight) { popLayerObj.create(); var pageSize = getPageXY(); $("popLayer").innerHTML = sHTML; $("bcPopLayer").style.width = pageSize[0]; $("bcPopLayer").style.height = pageSize[1]; $("popLayer").style.left = (pageSize[0] - nWidth)/2+'px'; //document.body.scrollTop $("popLayer").style.top = document.documentElement.scrollTop-4 + (pageSize[3] - nHeight) / 2+'px'; $("popLayer").style.width = nWidth; $("popLayer").style.height = nHeight; } popLayerObj.close = function () { var bcEle=$("bcPopLayer"); var ele=$("popLayer"); bcEle.style.display='none'; ele.style.display='none'; ele.innerHTML=''; var ele=document.getElementsByTagName("select"); for(var i=0;i<ele.length;i++){ if(ele[i]!=null) ele[i].style.display=''; } popLayerObj.closeEnd(); } popLayerObj.ofush=function(){//如果你重写了popLayerObj.createBefore popLayerObj.closeEnd 可以调用这个方法清除 popLayerObj.createBefore=function(){}; popLayerObj.closeEnd=function(){}; } popLayerObj.createBefore=function(){};//可以重写的 popLayerObj.closeEnd=function(){};//可以重写的 popLayerObj.create = function () { popLayerObj.createBefore(); var bcEle=$("bcPopLayer"); var ele=$("popLayer"); if(bcEle==null){ var str = '\ <div style="position:absolute; background:#6699FF; top: 0px; left: 0px; filter:alpha(opacity=20);-moz-opacity:0.2;opacity: 0.2;" id="bcPopLayer"></div>\ <div id="popLayer" style="background:white;position:absolute;"></div>\ '; addHTML(document.body, str); }else{ bcEle.style.display=''; ele.style.display=''; } var ele=document.getElementsByTagName("select"); for(var i=0;i<ele.length;i++){ if(ele[i]!=null) ele[i].style.display='none'; } } popLayerObj.reSize = function (nWidth,nHeight) { var pageSize = getPageXY(); document.getElementById("popLayer").style.left = (pageSize[0] - nWidth)/2; document.getElementById("popLayer").style.top = document.documentElement.scrollTop-4 + (pageSize[3] - nHeight) / 2+'px'; $("popLayer").style.width = nWidth; $("popLayer").style.height = nHeight; } //提示框 1=确定 2=确定 取消 popLayerObj.showPrompt=function(msg,flag){ var sb=[]; sb.push('<div class="layer-size-03" >'); sb.push('<ul>'); sb.push('<li class="li-layer-title "><span class="float-left layer-title">系统提示</span><span class="float-right layer-close "><a onclick="popLayerObj.close();" href="javascript:void(0)"><img src="/control/images/close.gif" alt="关闭" border="0" /></a></span></li>'); sb.push('<li>'); sb.push('<div class="layer-connect3">'); sb.push('<ul>'); sb.push('<li style="clear:both;"> </li>'); sb.push('<li>'+msg+'</li>'); sb.push('<li> </li>'); sb.push('<li class="layer-post"><input onclick="popLayerObj.close();" name="button6" type="button" class="layer-input01" value="确定" />'); if(flag && flag==2) sb.push(' <input onclick="cancel();" name="button6" type="button" class="layer-input01" value="取消" />'); sb.push('</li>'); sb.push('<li style="clear:both;"> </li>'); sb.push('</ul>'); sb.push('</div>'); sb.push('</li>'); sb.push('</ul>'); sb.push('</div>'); popLayerObj.show(sb.join(''),300,100); } //加载进度条 popLayerObj.loading=function(msg){ if(msg==null) msg='正在处理数据'; var shtml=[]; shtml.push('<div style="border:1 solid #28567B;width:180px;height:30px">'); shtml.push('<img style="padding-left:20px;padding-top:20px;padding-bottom:15px;float:left;" src="/control/images/video/shuaxin3.gif"></img>'); shtml.push('<div style="padding-left:10px;padding-top:20px;padding-bottom:15px;float:left;">'+msg+'... ...</div></div>'); popLayerObj.show(shtml.join(''),180,30); } |
| 返回顶楼 | |
|
发表时间：2007-06-25
/****************************************************
获取坐标 *******************************************************/ function getPageXY() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; }else if (document.body.scrollHeight > document.body.offsetHeight){ xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; }else { xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { windowWidth = self.innerWidth; windowHeight = self.innerHeight; }else if (document.documentElement && document.documentElement.clientHeight) { windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; }else if (document.body) { windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } if(yScroll < windowHeight){ pageHeight = windowHeight; }else { pageHeight = yScroll; } if(xScroll < windowWidth){ pageWidth = windowWidth; }else { pageWidth = xScroll; } var arrayPageXY = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageXY; } function addHTML(oParentNode, sHTML) { if(window.addEventListener) { var oRange = oParentNode.ownerDocument.createRange(); oRange.setStartBefore(oParentNode); var oFrag = oRange.createContextualFragment(sHTML); oParentNode.appendChild(oFrag); }else { oParentNode.insertAdjacentHTML("BeforeEnd", sHTML); } } |
| 返回顶楼 | |
|
发表时间：2007-06-25
function $(id){
return document.getElementById(id); } |
| 返回顶楼 | |
|
发表时间：2007-07-26
直接使用css来给div定位就好了
css代码大致如下： div#弹出层的ID {position:absolute;top:50%;left:50%;} 不过请注意，这里的层必须是在放在body节点下，因为上面css中的top和left是相对起父容器而言的。 这样做出来的居中div并不是完全处于页面的正中，因为没有考虑层本身的长高问题。 |
| 返回顶楼 | |
|
发表时间：2007-07-30
Use Screen Object instead of document.body.
|
| 返回顶楼 | |
