javascript 弹出层组件（升级版）_javascript技巧

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

下面是代码，里面都有注释，可以直接运行。
在线演示 http://demo.jb51.net/js/2011/js_popup_up/index.htm

复制代码 代码如下:

";
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 = '';
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("

");
})();
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);
}

1. 点击我试试


2. 自定义弹出层


3. 自带模态对话框


4. 右下角广告

abcd111 abcd222

这是第二个测试例子！x

右下角广告x

<script> <BR>//参数con为自带弹出框的内容，confirm为是否需要确认按钮，wraphide是否显示遮罩层，wrap自定义层id <BR>var dlg1=d_log({con:'<span>确定要删除此文件吗？',confirm:'check'});//自动生成的dialog <BR>var dlg2=d_log({wraphide:'hide',wrapId:'owp'});//自定义的dialog <BR>var dlg3=d_log({wraphide:'hide',wrapId:'owp1',pos:'right-bottom'});//pos弹出层的位置 <BR>var arr=[1,2,3,4,5,5,6,7,8]; <BR>function check(){ <BR>alert('test!'); <BR>} <BR></script>