자바스크립트 객체지향 way_js 객체지향으로 구현된 팝업 레이어 효과 코드-JS 튜토리얼-php.cn

자바스크립트 객체지향 way_js 객체지향으로 구현된 팝업 레이어 효과 코드

WBOY

풀어 주다： 2016-05-16 18:35:50

원래의

1269명이 탐색했습니다.

js의 객체 지향적 특성에 관해 말하자면, 프로토타입의 내장 속성인 js를 언급해야 합니다(참고: 여기서 프로토타입은 프로토타입.js가 아닙니다). 객체에 대한 객체. 이제 해야 할 일은 상속 등의 코드를 최대한 공개하는 것입니다. 좋습니다. 이에 대해서는 더 이상 말하지 않겠습니다. 프로토타입에 대해 모르신다면 관련 콘텐츠를 검색해 보세요.

오늘 제가 하고 싶은 일은 html 요소를 클릭하여 친숙한 대화 상자를 표시하는 것입니다. 우선 두 가지 점을 분명히 해야 합니다. 하나는 이 방법을 많이 사용할 수 있다는 것입니다. 그리고 시스템이 경고하거나 확인하는 것도 원하지 않습니다. 두 번째 요점은 팝업 콘텐츠가 최대한 다양할 수 있고 심지어 사용자 정의될 수도 있다는 것입니다. 이 두 가지 사항을 명확히 한 후에는 js 코드를 작성할 수 있습니다. 모두 매우 초보적인 것입니다. ^.^

먼저 간단한 객체 정의:

코드 복사 코드는 다음과 같습니다.

 
function objDIV() { 
this.bgdiv; 
this.infodiv; 
} 

먼저 마스크 레이어를 팝업하고 싶습니다. 이름을 openBackDiv()로 하겠습니다.

코드 복사 코드는 다음과 같습니다.

 
function openBackDiv(txbdiv) { 
txbdiv.bgdiv = document.createElement("div"); 
txbdiv.bgdiv.setAttribute("id", "overDiv") 
txbdiv.bgdiv.innerHTML = ""; 

} 

추가로 추가하세요. 방금 정의한 객체의 프로토타입(openBG()):

코드 복사 코드는 다음과 같습니다.

 
objDIV.prototype.openBG = function() { 
openBackDiv(this); 
document.body.appendChild(this.bgdiv); 
this.bgdiv.style.display = "블록" ; 
this.bgdiv.style.width = document.documentElement.clientWidth "px"; 
this.bgdiv.style.height = document.documentElement.scrollHeight "px" 

 

그런 다음 팝업 정보 레이어를 추가합니다. 방법은 위와 동일합니다. 그래서 이건 아주 기본적인 얘기라고 했는데요, 정말 할 말이 없는 것 같으니 그냥 코드로 가보세요!

로딩 팝업 레이어입니다.

코드 복사 코드는 다음과 같습니다.

function openLoadDiv(txbdiv) {
txbdiv.infodiv = document.createElement("div");
txbdiv.infodiv.setAttribute("id", "div_info")
txbdiv .infodiv.innerHTML = "

기다려 주십시오 대기 중, 처리 중...

";
document.body.appendChild(txbdiv.infodiv);
txbdiv.infodiv .style.width = "550px";
txbdiv.infodiv.style.height = "270px";
txbdiv.infodiv.style.fontSize = "14px"; "absolute";
txbdiv.infodiv.style.Background = "#fff";
txbdiv.infodiv.style.zIndex = "9999";
centerobject();//센터링 방법
}
objDIV.prototype.openLoading = function() { this.openBG(); openLoadDiv(this) }

이렇게 하면 간단한 팝업 로딩 레이어가 완성됩니다. 이제 성취감을 느끼셨나요? 그러면 다른 작업을 완료해 보세요! 이제 모두 팝업되었으므로 어느 시점에서 제거해야 하며 이러한 레이어를 제거하는 방법은 다음과 같습니다.