قم بإنشاء طبقة قناع
نسخة الكود كما يلي:
_createcover: function () {
var newmask = 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 (عتامة = 50)" ؛
newmask.Style.Opacity = "0.50" ؛
newmask.style.display = 'none' ؛
document.body.appendchild (Newmask) ؛
this._cover = newmask ؛
}
إنشاء طبقة منبثقة جديدة
نسخة الكود كما يلي:
_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 ؛
}
اضبط موضع الطبقة المرنة
نسخة الكود كما يلي:
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" ؛
}
ضبط الموضع عند شاشة التمرير أحداث
نسخة الكود كما يلي:
this._fs = bindaseventListener (هذا ، this.addjustposition) ؛
addEventHandler (نافذة ، "Scroll" ، this._fs) ؛
// بعد إخفاءه ، تحتاج إلى ذلك
removeEventHandler (window ، "scroll" ، this._fs) ؛
رمز كامل
نسخة الكود كما يلي:
var floater = (function () {
var me = class.create () ؛
me.prototype = {
تهيئة: وظيفة (خيارات) {
this._fs = bindaseventListener (هذا ، this.addjustposition) ؛
this.setOptions (الخيارات) ؛
} ،
setOptions: وظيفة (خيارات) {
this.options = الخيارات || {} ؛
this._id = options.id ؛
this._mark = 'mark' ؛
} ،
عرض: وظيفة (HTML ، الخيارات) {
خيارات = خيارات || {} ؛
if (! this._cover) {
this._createcover () ؛
}
if (! this._floater) {
this._createfloater (html) ؛
}
if (Options.saveopt) {
this._saveoption = Options.saveopt ؛
this.bindsaveVent () ؛
}
this._bindscrollevent () ؛
this.addjustposition () ؛
this._floater.style.display = '' ؛
this._cover.style.display = '' ؛
this.isshow = صحيح ؛
} ،
إدراج: وظيفة (HTML ، OPTS ، ATT) {
var _e = document.createElement ("div") ، _t ؛
_e.innerhtml = html ؛
لـ (var k in opts) {
_e [k] = opts [k] ؛
}
_t = this._floater.queryselector ('['+att+']') ؛
إذا (_t) {
_t.appendchild (_e) ؛
}
} ،
getFloater: function () {
if (this._floater) {
إرجاع this._floater ؛
}
} ،
// قناع طبقة
_createcover: function () {
var newmask = 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 (عتامة = 50)" ؛
newmask.Style.Opacity = "0.50" ؛
newmask.style.display = 'none' ؛
document.body.appendchild (Newmask) ؛
this._cover = newmask ؛
} ،
// طبقة منبثقة جديدة
_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 ؛
} ،
// يتم تمرير الطبقة المنبثقة إلى الوسط
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._savelem = this._floater.queryselector ('['+this._saveoption.elem+']') ؛
if (this._savelem) {
addEventHandler (this._savelem ، "انقر" ، this._saveoption.handler) ؛
}
} ،
_bindscrollevent: function () {
addEventHandler (نافذة ، "Scroll" ، this._fs) ؛
} ،
إخفاء: وظيفة () {
this.isshow = false ؛
this.destory () ؛
} ،
القدر: وظيفة () {
removeEventHandler (window ، "scroll" ، this._fs) ؛
if (this._savelem) {
removeEventHandler (this._savelem ، "انقر" ، 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 ؛
}
} ؛
أعدني
}) () ؛