Heim  >  Artikel  >  Web-Frontend  >  javascript 弹出层组件(升级版)_javascript技巧

javascript 弹出层组件(升级版)_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:06:481044Durchsuche

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

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

复制代码 代码如下:





lock page



";
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. 右下角广告




这是第二个测试例子!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>
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn