JavaScriptで実装されたポップアップレイヤーエフェクトコード オブジェクト指向 way_js オブジェクト指向

js のオブジェクト指向の性質について言えば、js の組み込み属性について言及する必要があります (注: ここでのプロトタイプは、prototype.js ではありません)。その機能は、ある種のプロパティを動的に追加することです。オブジェクトをプロパティに変換します。今私がしなければならないことは、継承などのコードをできるだけ公開することです。プロトタイプについて詳しくない場合は、関連するコンテンツを検索してください。

今日私がやりたいことは、HTML 要素をクリックしてフレンドリーなダイアログ ボックスをポップアップすることです。まず、2 つの点を明確にする必要があります。1 つは、この方法を頻繁に使用する可能性があるということです。 2 番目のポイントは、ポップアップのコンテンツを可能な限り多様にし、カスタマイズすることもできることです。これら 2 つの点を明確にしたら、js コードを書くことができます。これらはすべて非常に初歩的なことです。私を軽蔑したい場合は、遠慮なく軽蔑してください。 ^.^

最初に単純なオブジェクトを定義します:

コードをコピーします コードは次のとおりです:

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

まず、マスク レイヤーをポップアップします。 openBackDiv(); という名前を付けます。

コードをコピーします コードは次のとおりです:

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

}

さらに、定義したばかりのオブジェクトのプロトタイプ (openBG()):

コードをコピー コードは次のとおりです:

objDIV.prototype.openBG = function() {
openBackDiv(this);
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";
centerobject();//センタリングメソッド
}
objDIV.prototype.openLoading = function() { this.openBG(); openLoadDiv(this) }



これを実行すると、単純なポップアップ読み込みレイヤーが完成します達成感を感じましたか?その後、他のタスクを完了してください。これらはすべてポップアップ表示されたので、いつかは削除する必要があります。これらのレイヤーを削除する方法は次のとおりです。




コードをコピー

コードは次のとおりです:

objDIV.prototype.removeBG = function() {
if (this.bgdiv || document.getElementById("overDiv")) {
if (this.bgdiv) {
ドキュメント.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 - parseInt(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;
[code]
演示地址
http://demo.jb51.net/js/opendiv/opendiv.htm