javascript 팝업 레이어 구성 요소(업그레이드 버전)_javascript 기술

이번에는 기능을 다시 강화하기 위해 원래 코드의 조직 구조를 사용했습니다. 현재는 여전히 두 가지 작은 문제가 있습니다. 첫 번째는 IE6의 사용자 정의 팝업 레이어가 선택 항목을 처리할 수 없다는 것입니다. . 아직 구성요소에 추가되지 않은 경우 맞춤 div에 iname을 추가하여 구성요소와 함께 제공되는 팝업 레이어를 가릴 수 있습니다. 두 번째 문제는 절대 위치이기 때문에 브라우저 창 크기가 변경되면 자동으로 따르지 않는다는 것입니다. 물론 사용해보시면 아시겠지만, 문제가 더 많겠지만, 제가 보기에 더 중요하다고 생각하는 이 두 가지는 일단 여기에 나열하고 나중에 수정하겠습니다.

다음 코드는 주석이 있고 직접 실행할 수 있는 코드입니다.
온라인 데모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 '왼쪽 상단':
l=0;
t=0
break
case '왼쪽 하단':
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
기본값:
l=(document.body.clientWidth-parseInt(getSize(self. 대화상자).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 = '절대';
시도해 보세요{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
(function(){
body = document.body;
if (body.currentStyle.BackgroundAttachment !== "fixed") {
if ( body.parentNode.currentStyle.BackgroundImage === "없음") {
body.parentNode.runtimeStyle.BackgroundRepeat = "반복 없음"
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=clone;
if(self.layer.parentNode!== body )
body.insertBefore(self.layer, body.childNodes[0]);
//self.dialog.innerHTML = iframe;
cover.innerHTML = iframe;
cover.style.cssText='위치:절대;왼쪽:표현((document).documentElement.scrollLeft);top:표현((document).documentElement.scrollTop);너비:표현((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='차단';
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='없음';
this.cover.style.display='없음';
}
function getSize(elem) {//获取元素的宽高,包括隐藏元素的
var width = elem.offsetWidth, height = elem.offsetHeight;
if ( !width && !height ) {
var style = elem.style;
var cssShow ="위치: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 { "너비": 너비, "높이": 높이 };
}
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' 유형, el[type fn]);
}else
el.addEventListener(type, fn, false);
}



🎜>

나를 클릭하세요

맞춤 팝업 레이어

;li>내장 모달 대화 상자

오른쪽 하단에 광고

abcd111 abcd222 div id="owp" style= "width:300px;height:200px;">두 번째 테스트 예시입니다! x

오른쪽 하단에 광고x

;








;

















;








;

















;








;























//매개변수 con은 팝업 상자의 내용이고, 확인 버튼이 필요한지 여부, Wraphide가 마스크 레이어를 표시하는지 여부, 사용자 정의 레이어 ID 래핑
var dlg1=d_log({con:' 이 파일을 삭제하시겠습니까? ',confirm:'check'});//자동으로 생성된 대화 상자
var dlg2=d_log({wraphide:'hide',wrapId:'owp'});//사용자 정의 대화 상자
var dlg3=d_log({wraphide:'hide',wrapId:'owp1',pos:'right-bottom'});//pos 팝업 레이어 위치
var arr=[1,2,3 , 4,5,5,6,7,8];
함수 확인(){
alert('test!')