JavaScriptポップアップレイヤーコンポーネント（アップグレード版）_JavaScriptスキル

今回は、元のコードの組織構造を使用して機能を再強化しました。現時点では、まだ 2 つの小さな問題があります。1 つ目は、IE6 のカスタム ポップアップ レイヤーが選択範囲をカバーできないことです。まだコンポーネントに追加されていないため、カスタム div に ifame を追加すると、コンポーネントに付属のポップアップ レイヤーをカバーできます。 2 番目の問題は、絶対位置に設定されているため、ブラウザのウィンドウ サイズが変更されたときに自動的に追従しないことです。もちろんやってみるとわかりますが、問題点はたくさんあると思いますが、当面は重要と思われる 2 つをここに記載し、後で修正します。

以下はコードです。コメントがあり、直接実行できます。
オンライン デモ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){
ケース '左上':
t=0;
ケース '左下':
l=0; ;
t=c_height-parseInt(getSize(self.dialog).height);
break;
case 'right-top':
l=document.body.clientWidth-parseInt( self.dialog).width);
t=0;
case 'right-bottom':
l=document.body.clientWidth-parseInt(getSize(self.dialog). width);
t=c_height-parseInt(getSize(self.dialog).height);
break;
デフォルト:
l=(document.body.clientWidth-parseInt(self.ダイアログ).幅))/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 = '絶対';
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(クローン);
self.dialog=クローン;
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);高さ:expression((document).documentElement.clientHeight);';
}
}
d_log.prototype.open=function(){
if(this.layer)
this.layer.style.display='block';
this.dialog.style.display='ブロック';
if(!this.wrapide)
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;
幅 = elem.offsetWidth;高さ = elem.offsetHeight;
elem.style.cssText=cssBack;
}
return { "width": 幅, "height": 高さ };
}
function addEvent(el,type,fn){ //绑定イベント
var self = this;
if(el.attachEvent) {
el['e' type fn] = fn; //IE 下贝元素参照,この指向 el オブジェクトではなく window
el[type fn] = function(){el['e' type fn](window.event);}
el.attachEvent ('on' タイプ、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>