一个模拟模态窗口的JS类

内容简介：这是一篇关于js 模拟窗口,js 妯℃�佺獥鍙,js 妯℃嫙绐楀彛的文章。一个模拟模态窗口的JS类

function modal(d,h)//定义类本身
{
if(h!="hidden") document.write (‘<div id="modalgraylay" style="position:absolute; z-index:1; width:100%; height:‘+(document.body.scrollheight+200)+‘px; top:0px; left:0px;background-color:#efefef; filter: alpha(opacity=75); display:table;visibility:hidden;"></div>‘) ;
this.div=d;
this.hid=h;
}
//显示层
//将需要中央显示的层居中，并显示它和背景层
modal.prototype.show=function(h) {
var d;
d=this.div;
center(this.div);//
window.onscroll=function(){center(d)} ^备注1
window.onresize=function(){center(d)}
if(this.hid!="hidden") show("modalgraylay");
show(this.div);
}
//隐藏层
//隐藏中央显示的层和背景层
modal.prototype.closeit=function() {
if(this.hid!="hidden") hid("modalgraylay");
hid(this.div);
}
function center(d){
var h,tab,w;
tab=document.getelementbyid(d);
//alert(d);
if(isie()==7) h=math.floor((document.documentelement.clientheight-tab.clientheight)*4/8)+document.documentelement.scrolltop;
else{h=math.floor(((isie()>0?document.documentelement.clientheight:window.innerheight)-tab.clientheight)*4/8)+document.documentelement.scrolltop;}
tab.style.top=h+"px";
if(isie()==7) w=math.floor((document.documentelement.clientwidth-tab.clientwidth)*4/8);
else w=math.floor(((isie()>0?document.body.offsetwidth:window.innerwidth)-tab.clientwidth)*4/8);
tab.style.left=w+"px";
}
function isie(){
var ua=window.navigator.useragent;
var msie=ua.indexof("msie ");
if(msie>0) msie=parseint(ua.substring(msie+5,ua.indexof(".",msie)));
return msie;
}
function $(o){return document.getelementbyid(o);}
function show(o){$(o).style.display="block";$(o).style.visibility="visible";}
function hid(o){$(o).style.display="none";$(o).style.visibility="hidden";}

 

调用方式

var a=new modal("upimage");//构造隐藏的层
var b=new modal("upsuccess");//构造隐藏的层
//显示背景层以及中间的divbox1
function showmodal(){a.show()}
function closemodal(){a.closeit()}
function showmodal1(){b.show()}
function closemodal1(){b.closeit()}

当中出现了几个问题

1、备注1原有的代码是window.onscroll=function(){center(this.div)}，但是实际上，当执行window.onscroll时候，无法取得this.div的值。后面将window.onscroll=function(){center(this.div)}改为window.onscroll=function(){center(d)}，写入构造函数，但是又出现新问题，当创建第二个实例以后，第二个窗口无法根据浏览器窗口变化居中，最终改为现在的样子。

2、最初调用时出现第一次调用center位置靠右的情况，后来发现不能给居中的窗口设定display:none属性来隐藏

现在存在的问题：

1、如果将居中窗口放在页面最底部，会出现一段空白

2、隐藏层没有完全遮挡住页面

应该都是小问题，有空时候再雕琢下

码代码时候 技术交流qq群17322384的大闸蟹 (87338772)和 ai为吃饭拼命 (39126263) 帮了不少忙，鸣谢~~