javascript 弹出层组件（升级版）_Javascript教程-查字典教程网

摘要：这次还是利用原来代码的组织结构重新加强了功能，目前来说还有两个小问题，第一个是ie6下自定义弹出层会出现无法遮住select的情况，目前还没...

这次还是利用原来代码的组织结构重新加强了功能，目前来说还有两个小问题，第一个是ie6下自定义弹出层会出现无法遮住select的情况，目前还没加入到组件里，可以自己在自定义的div里面加上ifame来遮罩，组件自带的弹出层可以遮住。第二个问题，由于是绝对定位，所以在改变浏览器窗口大小的时候会出现无法自动跟随。大家试试就知道了，当然问题肯定不少，只是这两个我认为比较重要的，暂时列出来，以后修复。

下面是代码，里面都有注释，可以直接运行。

在线演示 http://demo.jb51.net/js/2011/js_popup_up/index.htm

复制代码代码如下:

<!DOCTYPE>

<head>

<style>

body {padding:0; margin:0; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;}

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button, input, textarea,th, td {margin: 0;padding: 0;}

button, input, select, textarea {font: 12px/1.5 tahoma, arial, simsun, sans-serif;}

h1, h2, h3, h4, h5, h6 { font-size: 100%;font-weight:normal; }

address, cite, dfn, em, var { font-style: normal; }

code, kbd, pre, samp { font-family: courier new, courier, monospace; }

small { font-size: 12px; }

ul, ol { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

legend { color: #000; }

fieldset, img { border: 0; }

button, input, select, textarea { font-size: 100%; }

table { border-collapse: collapse; border-spacing: 0; }

.clear {clear:both;}

html { overflow:-moz-scrollbars-vertical; }

a { text-decoration: none;}

a:hover { text-decoration: underline;}

#pageOverlay {overflow:hidden;display:none;position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }

.pageDialog{border: 4px solid #999999;display:none;position:fixed; top:40%; left:50%; z-index:1988;background:#fff;}

.pageDialog h3{padding-left:10px;overflow:hidden;font-size:14px;font-weight:normal;height:25px;line-height:25px;background:#666;color:#fff;zoom:1;}

.pageDialog h3 a{float:right;color:#ddd;display:inline;font-weight:bold;width:20px;text-align:center;margin-right:5px;}

.pageDialog h3 a:hover{ text-decoration: none;color:#fff;}

.pageDialog span{margin:10px;display: block;}

.pageDialog .confirm,.pageDialog .concel{display:inline-block;background:#ccc url(../images/DialogBtn.png) no-repeat;width:45px;height:25px;text-align:center;line-height:25px;font-weight:bold;margin-right:10px;}

.pageDialog .confirm:hover,.pageDialog .concel:hover{ text-decoration: none;}

.pageDialog .confirm{background-position:0 0;color:#000;}

.pageDialog .concel{background-position:-45px 1px;color:#000;display:none;}

.oprate{margin:20px 0 10px 0;text-align:center;}

#test li{display:inline;}

</style>

function d_log(contents){

if(!(this instanceof d_log))

return new d_log(contents);

this.title=contents&&contents.title||"系统提示";//默认系统提示

this.con=contents&&contents.con||"";//默认弹出内容为空

this.wrap=contents&&contents.wrapId;//是否为自定义弹出层

this.confirm=contents&&contents.confirm;//是否需要确认按钮

this.wraphide=contents&&contents.wraphide||!1;//是否显示背景遮罩层

this.pos=contents&&contents.pos;//自带左右上下角的定位

if(document.getElementById('pageOverlay')){//公用一个cover层，这样避免冗余标签

this.cover=document.getElementById('pageOverlay');

}else{

this.cover=document.createElement('div');

this.cover.id='pageOverlay';

this.cover.style.display='none';

document.body.appendChild(this.cover);

}

this.dialog=document.createElement('div');//对话框

this.dialog.className='pageDialog';

document.body.appendChild(this.dialog);

this.init();

}

d_log.prototype.init=function(){

var self=this,c_height,l,t;

c_height=document.compatMode!="BackCompat" ? document.documentElement.clientHeight : document.body.clientHeight;

if(self.wrap){//如果有指定显示的层则把它加到弹出层中

self.dialog.appendChild(document.getElementById(self.wrap));

}else{//没有则重新构建一个弹出层

self.dialog.innerHTML='<div><h3><a href="javascript:;">x</a>'+self.title+'</h3>';

self.dialog.innerHTML+=self.con+"<p><a href='javascript:;'>确定</a><a href='javascript:;'>取消</a></p></div>";

var _p = self.dialog.getElementsByTagName('p')[0];

if(self.confirm)

_p.lastChild.style.display='inline-block';

addEvent(_p.getElementsByTagName('a')[0],'click',function(){

self.close();

if(self.confirm)eval(self.confirm+'()');

});

addEvent(_p.getElementsByTagName('a')[1],'click',function(){

self.close();

});

addEvent(self.dialog.getElementsByTagName('a')[0],'click',function(){

self.close();

});

}

switch(self.pos){

case 'left-top':

l=0;

t=0;

break;

case 'left-bottom':

l=0;

t=c_height-parseInt(getSize(self.dialog).height);

break;

case 'right-top':

l=document.body.clientWidth-parseInt(getSize(self.dialog).width);

t=0;

break;

case 'right-bottom':

l=document.body.clientWidth-parseInt(getSize(self.dialog).width);

t=c_height-parseInt(getSize(self.dialog).height);

break;

default:

l=(document.body.clientWidth-parseInt(getSize(self.dialog).width))/2;

t=(c_height-parseInt(getSize(self.dialog).height))/2;

}

self.dialog.style.left=l+'px';

self.dialog.style.top=t+'px';

if(!window.XMLHttpRequest){

var body,clone,cover = self.cover;

var iframe = '<iframe width="100%" height="100%" frameborder="0" scrolling="no"></iframe>';

self.dialog.style.position = 'absolute';

try{

document.execCommand("BackgroundImageCache", false, true);

}catch(e){}

(function(){

body = document.body;

if (body.currentStyle.backgroundAttachment !== "fixed") {

if (body.parentNode.currentStyle.backgroundImage === "none") {

body.parentNode.runtimeStyle.backgroundRepeat = "no-repeat";

body.parentNode.runtimeStyle.backgroundImage = "url(about:blank)";

}

body.style.height='100%';

}

self.layer = document.createElement("<div>");

})();

clone=self.dialog.cloneNode(true);

document.body.removeChild(self.dialog);

self.layer.appendChild(clone);

self.dialog=clone;

if(self.layer.parentNode!== body )

body.insertBefore(self.layer, body.childNodes[0]);

//self.dialog.innerHTML += iframe;

cover.innerHTML = iframe;

cover.style.cssText='position:absolute;left:expression((document).documentElement.scrollLeft);top:expression((document).documentElement.scrollTop);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);';

}

d_log.prototype.open=function(){

if(this.layer)

this.layer.style.display='block';

this.dialog.style.display='block';

if(!this.wraphide)

this.cover.style.display='block';

}

d_log.prototype.close=function(){

if(this.layer)

this.layer.style.display='none';

this.dialog.style.display='none';

this.cover.style.display='none';

}

function getSize(elem) {//获取元素的宽高，包括隐藏元素的

var width = elem.offsetWidth, height = elem.offsetHeight;

if ( !width && !height ) {

var style = elem.style;

var cssShow ="position:absolute;visibility:hidden;display:block;left:-9999px;top:-9999px;";

var cssBack ="position:"+style.position+";visibility:"+style.visibility+";display:"+style.display+";left:"+style.left+";top:"+style.top;

elem.style.cssText=cssShow;

width = elem.offsetWidth; height = elem.offsetHeight;

elem.style.cssText=cssBack;

}

return { "width": width, "height": height };

}

function addEvent(el,type,fn){ //绑定事件

var self = this;

if(el.attachEvent) {

el['e'+type+fn] = fn; //IE下拷贝元素引用,使this指向el对象而不是window

el[type+fn] = function(){el['e'+type+fn](window.event);}

el.attachEvent('on'+type, el[type+fn]);

}else

el.addEventListener(type, fn, false);

}

</script>

</head>

<li id="par"><a id='no1' href="javascript:dlg1.open();">点击我试试</a></li>

<li><a href="javascript:dlg2.open();">自定义弹出层</a></li>

<li><a href="javascript:dlg1.open();">自带模态对话框</a></li>

<li><a href="javascript:dlg3.open();">右下角广告</a></li>

</ol>

<div id="owp">这是第二个测试例子！<a href="javascript:dlg2.close();">x</a></div>

<div id="owp1">右下角广告<a href="javascript:dlg3.close();">x</a></div>

</body>

</html>

//参数con为自带弹出框的内容，confirm为是否需要确认按钮，wraphide是否显示遮罩层，wrap自定义层id

var dlg1=d_log({con:'<span>确定要删除此文件吗？</span>',confirm:'check'});//自动生成的dialog

var dlg2=d_log({wraphide:'hide',wrapId:'owp'});//自定义的dialog

var dlg3=d_log({wraphide:'hide',wrapId:'owp1',pos:'right-bottom'});//pos弹出层的位置

var arr=[1,2,3,4,5,5,6,7,8];

function check(){

alert('test!');

}

</script>