javascript popup layer component (upgraded version)_javascript skills

This time, we have used the organizational structure of the original code to re-enhance the function. Currently, there are still two small problems. The first one is that the custom pop-up layer under IE6 will not be able to cover the selection. It has not been added to the component yet. , you can add ifame to the custom div to cover it, and the pop-up layer that comes with the component can be covered. The second problem is that because it is absolutely positioned, it will not follow automatically when the browser window size is changed. You will know after you try it. Of course, there must be many problems, but these two that I think are more important are listed here for the time being and will be fixed later.

The following is the code, it has comments and can be run directly.
Online demohttp://demo.jb51.net/js/2011/js_popup_up/index.htm

Copy code The code is as follows:

";
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. Click me Try


2. custom popup layer


3. Built-in modal dialog box


4. Advertising in the lower right corner

abcd111 abcd222 div id="owp" style="width:300px;height:200px;">This is the second test example! x

Advertising in the lower right cornerx

< ;br/>






















< ;br/>






















< ;br/>





















<script> <BR>//The parameter con is the content of the pop-up box, confirm is whether a confirmation button is needed, whether wraphide displays the mask layer, wrap custom layer id <BR>var dlg1=d_log({con:'<span>Confirm you want to Delete this file? ',confirm:'check'});//Automatically generated dialog <BR>var dlg2=d_log({wraphide:'hide',wrapId:'owp'});//Customized dialog <BR>var dlg3=d_log({wraphide:'hide',wrapId:'owp1',pos:'right-bottom'});//position of pos pop-up layer<BR>var arr=[1,2,3 ,4,5,5,6,7,8]; <BR>function check(){ <BR>alert('test!'); <BR>} <BR></script>