Buat lapisan topeng
Salinan kode adalah sebagai berikut:
_createCover: function () {
var newask = document.createElement ("div");
newmask.id = this._mark;
newmask.style.position = "absolute";
newmask.style.zindex = "100";
_scrollwidth = math.max (document.body.scrollwidth, document.documentelement.scrollwidth);
_scrollheight = Math.max (document.body.scrollheight, document.documentelement.scrollheight);
newmask.style.width = _scrollwidth + "px";
newmask.style.height = _scrollheight + "px";
newmask.style.top = "0px";
newmask.style.left = "0px";
newmask.style.background = "#000";
newmask.style.filter = "alpha (opacity = 50)";
newmask.style.opacity = "0,50";
newmask.style.display = 'none';
Document.Body.AppendChild (Newmask);
this._cover = newmask;
}
Buat lapisan pop-up baru
Salinan kode adalah sebagai berikut:
_createFloater: function (html) {
var newDiv = document.createElement ("div");
newDiv.id = this._id;
newDiv.style.position = "absolute";
newdiv.style.zindex = "9999";
newDivwidth = 400;
newDivHeight = 200;
newDiv.style.width = newDivWidth + "px";
newDiv.style.height = newDivHeight + "px";
newDiv.style.top = (document.body.scrolltop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollleft + document.body.clientwidth/2 - newDivwidth/2) + "px";
newDiv.style.padding = "5px";
newDiv.style.display = 'none';
newDiv.innerHtml = html;
Document.Body.AppendChild (NewDiv);
this._floater = newDiv;
}
Sesuaikan posisi lapisan elastis
Salinan kode adalah sebagai berikut:
addJustPosition: function () {
this._floater.style.top = (document.body.scrolltop + document.body.clientHeight/2 - newDivHeight/2) + "px";
this._floater.style.left = (document.body.scrollleft + document.body.clientwidth/2 - newDivwidth/2) + "px";
}
Sesuaikan posisi saat acara gulir layar
Salinan kode adalah sebagai berikut:
this._fs = bindAseventListener (this, this.addjustPosition);
addeventhandler (jendela, "gulir", this._fs);
// Setelah menyembunyikannya, Anda perlu
hapuseventhandler (jendela, "gulir", this._fs);
Kode lengkap
Salinan kode adalah sebagai berikut:
var floater = (function () {
var me = class.create ();
me.prototype = {
inisialisasi: fungsi (opsi) {
this._fs = bindAseventListener (this, this.addjustPosition);
this.setOptions (opsi);
},
setOptions: function (options) {
this.options = opsi || {};
this._id = options.id;
this._mark = 'Mark';
},
Tampilkan: function (html, opsi) {
opsi = opsi || {};
if (! this._cover) {
this._createCover ();
}
if (! this._floater) {
this._createFloater (html);
}
if (options.saveopt) {
this._saveOption = options.saveOpt;
this.bindsaveevent ();
}
this._bindscroleVent ();
this.addjustPosition ();
this._floater.style.display = '';
this._cover.style.display = '';
this.isshow = true;
},
Sisipkan: function (html, opts, att) {
var _e = document.createElement ("div"), _t;
_e.innerHtml = html;
untuk (var k in opts) {
_e [k] = opts [k];
}
_t = this._floater.querySelector ('['+att+']');
if (_t) {
_t.AppendChild (_e);
}
},
getFloater: function () {
if (this._floater) {
kembalikan this._floater;
}
},
// Lapisan Topeng
_createCover: function () {
var newask = document.createElement ("div");
newmask.id = this._mark;
newmask.style.position = "absolute";
newmask.style.zindex = "100";
_scrollwidth = math.max (document.body.scrollwidth, document.documentelement.scrollwidth);
_scrollheight = Math.max (document.body.scrollheight, document.documentelement.scrollheight);
newmask.style.width = _scrollwidth + "px";
newmask.style.height = _scrollheight + "px";
newmask.style.top = "0px";
newmask.style.left = "0px";
newmask.style.background = "#000";
newmask.style.filter = "alpha (opacity = 50)";
newmask.style.opacity = "0,50";
newmask.style.display = 'none';
Document.Body.AppendChild (Newmask);
this._cover = newmask;
},
// Lapisan pop-up baru
_createFloater: function (html) {
var newDiv = document.createElement ("div");
newDiv.id = this._id;
newDiv.style.position = "absolute";
newdiv.style.zindex = "9999";
newDivwidth = 400;
newDivHeight = 200;
newDiv.style.width = newDivWidth + "px";
newDiv.style.height = newDivHeight + "px";
newDiv.style.top = (document.body.scrolltop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollleft + document.body.clientwidth/2 - newDivwidth/2) + "px";
newDiv.style.padding = "5px";
newDiv.style.display = 'none';
newDiv.innerHtml = html;
Document.Body.AppendChild (NewDiv);
this._floater = newDiv;
},
// Lapisan pop-up digulir ke tengah
addJustPosition: function () {
this._floater.style.top = (document.body.scrolltop + document.body.clientHeight/2 - newDivHeight/2) + "px";
this._floater.style.left = (document.body.scrollleft + document.body.clientwidth/2 - newDivwidth/2) + "px";
},
BindSaveEvent: function () {
this._saveelem = this._floater.querySelector ('['+this._saveoption.elem+']');
if (this._saveelem) {
addeventhandler (this._saveelem, "klik", this._saveoption.handler);
}
},
_bindscrollevent: function () {
addeventhandler (jendela, "gulir", this._fs);
},
hide: function () {
this.isshow = false;
this.destory ();
},
DESTORY: function () {
hapuseventhandler (jendela, "gulir", this._fs);
if (this._saveelem) {
hapuseventhandler (this._saveelem, "klik", this._saveoption.handler);
}
if (this._cover) {
document.body.removechild (this._cover);
}
if (this._floater) {
document.body.removechild (this._floater);
}
this._cover = null;
this._floater = null;
}
};
kembalikan aku;
}) ();