div 位于屏幕正中间_怎么让一个DIV绝对定位到页面的正中间

展开全部

就是一个弹出层

function ShowDiv(id)

{

this.oDiv=document.getElementById(id);

}

ShowDiv.prototype.show=function()

{

var _this=this;

this.cDiv=document.createElement("div");

this.cDiv.style.width="100%";

this.cDiv.style.height=document.documentElement.scrollHeight+"px";

this.cDiv.style.cssText+=" ;position:absolute;top:0px;left:0px;background:#000;opacity:0.5;filter:alpha(opacity:50);z-index:9998";

document.body.appendChild(this.cDiv);

var h2=document.documentElement.scrollTop||document.body.scrollTop;

this.oDiv.style.top=h2+200+"px";

this.oDiv.style.cssText+=" ;position:absolute;left:50%;display:block;z-index:9999;";

this.oDiv.style.marginLeft=-parseInt(_this.oDiv.offsetWidth/2)+"px";

myAddEvent(window,"scroll",function(){

var h=document.documentElement.scrollTop||document.body.scrollTop;

_this.oDiv.style.top=h+200+"px"

})

}

ShowDiv.prototype.close=function()

{

var _this=this;

_this.oDiv.style.display="none";

document.body.removeChild(_this.cDiv);

_this.cDiv=null;

}

function myAddEvent(obj,sEvent,fn)

{

obj.addEventListener?obj.addEventListener(sEvent,fn,false):obj.attachEvent("on"+sEvent,function(e){

fn.call(obj,e);

})

}

var p1=new ShowDiv("你想要的DIV的ID");

然后在显示按钮62616964757a686964616fe59b9ee7ad9431333332616463上加 οnclick="p1.show()" 在关闭按钮上加 οnclick="p1.close()"

带运动的

测试练习

*{margin:0;padding:0}

#con{width:500px;height:200px;background:red;display:none}

html{overflow:auto}

function ShowDiv(id)

{

this.oDiv=document.getElementById(id);

}

ShowDiv.prototype.show=function()

{

var _this=this;

this.cDiv=document.createElement("div");

document.getElementsByTagName("html")[0].style.overflow="visible"; //兼容IE67

document.body.style.overflow="hidden"; //取消浏览器滚动条

this.cDiv.style.width="100%";

this.cDiv.style.height="100%";

if (window.ActiveXObject){

var ua = navigator.userAgent.toLowerCase();

var ie=ua.match(/msie ([\d.]+)/)[1]

if(ie==6.0||ie==7.0){

this.cDiv.style.height=document.documentElement.clientHeight+"px";

myAddEvent(window,"resize",function()

{

_this.cDiv.style.height=document.documentElement.clientHeight+"px";

});

}

}

this.cDiv.style.cssText+=" ;position:absolute;top:0px;left:0px;background:#000;opacity:0;filter:alpha(opacity:0);z-index:9998";

document.body.appendChild(this.cDiv);

this.oDiv.style.cssText+=" ;position:absolute;left:50%;top:50%;z-index:9999;";

this.oDiv.style.marginLeft=-parseInt(_this.oDiv.offsetWidth/2)+"px";

this.oDiv.style.marginTop=-parseInt(_this.oDiv.offsetHeight/2)+"px";

startMove(this.cDiv,{opacity:50},function(){

_this.oDiv.style.display="block";

_this.h2=document.documentElement.clientHeight || document.body.clientHeight;

_this.oDiv.style.marginLeft=-parseInt(_this.oDiv.offsetWidth/2)+"px";

_this.oDiv.style.marginTop=-parseInt(_this.oDiv.offsetHeight/2)+"px";

})

}

ShowDiv.prototype.close=function()

{

var _this=this;

this.oDiv.style.display="none";

startMove(_this.cDiv,{opacity:0},function()

{

document.body.removeChild(_this.cDiv);

document.getElementsByTagName("html")[0].style.overflow="auto"; //兼容IE67

document.body.style.overflow="auto"; //恢复浏览器滚动条

this.cDiv=null;

})

}

function myAddEvent(obj,sEvent,fn)

{

obj.addEventListener?obj.addEventListener(sEvent,fn,false):obj.attachEvent("on"+sEvent,function(e){

fn.call(obj,e);

})

}

function getStyle(obj, attr)

{

if(obj.currentStyle)

{

return obj.currentStyle[attr];

}

else

{

return getComputedStyle(obj, false)[attr];

}

}

function startMove(obj, json, fn)

{

clearInterval(obj.timer);

obj.timer=setInterval(function (){

var bStop=true; //这一次运动就结束了——所有的值都到达了

for(var attr in json)

{

//1.取当前的值

var iCur=0;

if(attr=='opacity')

{

iCur=Math.round(parseFloat(getStyle(obj, attr))*100);

}

else

{

iCur=parseInt(getStyle(obj, attr));

}

//2.算速度

var iSpeed=(json[attr]-iCur)/5;

iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

//3.检测停止

if(iCur!=json[attr])

{

bStop=false;

}

if(attr=='opacity')

{

obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';

obj.style.opacity=(iCur+iSpeed)/100;

}

else

{

obj.style[attr]=iCur+iSpeed+'px';

}

}

if(bStop)

{

clearInterval(obj.timer);

if(fn)

{

fn();

}

}

}, 30)

}

var p1=new ShowDiv("con");

已赞过

已踩过<

你对这个回答的评价是？

评论

收起