弹出层窗口永远居中
复制代码 代码如下:
首先大家要了解一个不兼容的css样式position:fixed;
position属性有四个可选值,它们分别是:static、absolute、fixed、relative。
我们下面来共同学习它们的不同的用法,在学习中我们应该去思考在什么布局情况下,应该使用它们其中的哪一种。
position:static 无定位该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。如:#nav { position:static; } 其他两种前面提过,我们 主要说的是fixed position:fixed 相对于窗口的固定定位这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如web浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过css来实现了,而是应用了js脚本。请特别注意,ie6不支持……
这里我们用position:fixed;+ “hack技术” +“javascript”;结合来解决这一问题
复制代码 代码如下:
图胜前端工程师
body,div{margin:0; padding:0;}
#a{width:200px;height:200px;background:blue;position:fixed;left:50%;top:50%;margin-left:-100px;margin-top:-100px;_position:absolute;}
var isie=window.xmlhttprequest?false:true;
var aisie={};
window.onload=function(){
if(isie){
window.onscroll=doie;
window.onresize=doie; }
function doie(){
aisie.top=document.documentelement.scrolltop;
aisie.left=document.documentelement.scrollleft;
var width=document.documentelement.clientwidth;
var height=document.documentelement.clientheight;
var odiv=document.getelementbyid(a);
odiv.style.top=aisie.top+(height-odiv.offsetheight)/2+'px';
odiv.style.left=aisie.left+(width-odiv.offsetwidth)/2+'px';