استخدم JS الأصلي لتنفيذ تأثيرات الطبقة المنبثقة

قم بإنشاء طبقة قناع

نسخة الكود كما يلي:

_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 ؛

}

} ؛

أعدني

}) () ؛