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

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) }



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

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

objDIV.prototype.removeBG = function() {
if (this.bgdiv || document.getElementById("overDiv")) {
if (this.bgdiv) {
document .body.removeChild(this.bgdiv);
} else {
document.body.removeChild(document.getElementById("overDiv"));
}
}
}
objDIV.prototype.removeInfo = function() {
this.removeBG();
if (this.infodiv) {
document.body.removeChild(this.infodiv);
} else {
document.body.removeChild(document.getElementById("div_info"));
}
}

如果想弹出不同层信息的话，就可以添加不同的prototype属性。
完整的代码
[code]

//******js弹出层提示txb20100110********//
function objDIV() {
this.bgdiv ;
this.infodiv ;
}
objDIV.prototype.openBG = function() {
openBackDiv(this);
document.body.appendChild(this.bgdiv);
this.bgdiv.style.display = "block";
this.bgdiv.style.width = document.documentElement.clientWidth + "px";
this.bgdiv.style.height = document.documentElement.scrollHeight + "px";
}
objDIV.prototype.openRegInfo = function() {
this.openBG();
openDiv(this);
}
objDIV.prototype.openLoading = function() {
this.openBG();
openLoadDiv(this);
}
objDIV.prototype.openLoad = function() {
openLoadDiv(this);
}
objDIV.prototype.removeBG = function() {
if (this.bgdiv || document.getElementById("overDiv")) {
if (this.bgdiv) {
document.body.removeChild(this.bgdiv);
} else {
document.body.removeChild(document.getElementById("overDiv"));
}
}
}
objDIV.prototype.removeInfo = function() {
this.removeBG();
if (this.infodiv) {
document.body.removeChild(this.infodiv);
} else {
document.body.removeChild(document.getElementById("div_info"));
}
}

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";
txbdiv.infodiv.style.position = "absolute";
txbdiv.infodiv.style.background = "#fff";
txbdiv.infodiv.style.zIndex = "9999";

centerobject();
}

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

";
//txbdiv.openBG();
}
function openDiv(txbdiv) {
//txbdiv.openBG();
txbdiv.infodiv = document.createElement("div");
txbdiv.infodiv.setAttribute("id", "div_info");
txbdiv.infodiv.innerHTML = "

恭喜您，注册成功!

请牢记您的账号：5678537

";
document.body.appendChild(txbdiv.infodiv);
txbdiv.infodiv.style.width = "550px";
txbdiv.infodiv.style.height = "270px";
txbdiv.infodiv.style.fontSize = "14px";
txbdiv.infodiv.style.position = "절대";
txbdiv.infodiv.style.Background = "#fff"; style.zIndex = "9999";

centerobject();
}

function centerobject() {
if (document.getElementById("overDiv")) {
var objdiv = document.getElementById("overDiv").style;
objdiv.height = document.documentElement.scrollHeight "px";
objdiv.left =parseInt((document.documentElement.clientWidth -parseInt(objdiv) .width)) / 2) "px";
//alert(document.documentElement.scrollHeight)
objdiv.top =parseInt((document.documentElement.clientHeight -parseInt(objdiv.height))/2) "px";
}
if (document.getElementById("div_info")) {
var div_info = document.getElementById("div_info").style;
div_info.left = parseInt(( document.documentElement.clientWidth - parsInt(div_info.width)) / 2) "px";
div_info.top =parseInt((document.documentElement.clientHeight -parseInt(div_info.height)) / 2) "px";
}
}

function centerDIV(objId) {
if (document.getElementById(objId)) {
var objdiv = document.getElementById(objId).style;
objdiv.height = document.getElementById(objId).scrollHeight "px";
objdiv.width = document.getElementById(objId).scrollWidth "px";
objdiv.left =parseInt((document.documentElement.clientWidth -parseInt(objdiv.width)) / 2) "px";
//alert(document.documentElement.scrollHeight)
objdiv.top =parseInt((document.documentElement.clientHeight -parseInt(objdiv.height))/ 2) "px";

}
}

function centerObj(obj) {
if (obj) {
var objdiv = obj.style;
objdiv.height = obj.scrollHeight "px";
objdiv.width = obj.scrollWidth "px";
objdiv.left =parseInt((document.documentElement.clientWidth -parseInt(objdiv.width)) / 2) "px";
//alert(document.documentElement.scrollHeight)
objdiv.top =parseInt((document.documentElement.clientHeight -parseInt(objdiv.height)) / 2) "px";
}
}
//window.onresize = centerobject;
[코드]
演示地址
http://demo.jb51.net/js/opendiv/opendiv.htm