ネイティブ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（ofacity = 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、this.addjustposition）;

AddEventHandler（window、 "scroll"、this._fs）;

//それを隠した後、そうする必要があります

removeEventHandler（window、 "scroll"、this._fs）;

完全なコード

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

var floater =（function（）{

var me = class.create（）;

me.prototype = {

初期化：function（options）{

this._fs = bindaseventlistener（this、this.addjustposition）;

this.setoptions（options）;

}、

setoptions：function（options）{

this.options = options || {};

this._id = options.id;

this._mark = 'mark';

}、

show：function（html、options）{

オプション=オプション|| {};

if（！this._cover）{

this._createcover（）;

}

if（！this._floater）{

this._createfloater（html）;

}

if（options.saveopt）{

this._saveoption = option.saveopt;

this.bindsaveevent（）;

}

this._bindscrollevent（）;

this.addjustposition（）;

this._floater.style.display = '';

this._cover.style.display = '';

this.isshow = true;

}、

挿入：function（html、opts、att）{

var _e = document.createelement（ "div"）、_t;

_e.innerhtml = html;

for（optsのvar k）{

_e [k] = opts [k];

}

_t = this._floater.QuerySelector（ '['+att+']'）;

if（_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（ofacity = 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._saveElem = this._floater.querySelector（ '['+this._saveoption.elem+']'）;

if（this._saveelem）{

AddEventHandler（this._saveelem、 "click"、this._saveoption.handler）;

}

}、

_bindscrollevent：function（）{

AddEventHandler（window、 "scroll"、this._fs）;

}、

非表示：function（）{

this.isshow = false;

this.destory（）;

}、

DESTORY：function（）{

removeEventHandler（window、 "scroll"、this._fs）;

if（this._saveelem）{

removeEventHandler（this._saveelem、 "click"、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;

}

};

私を返してください。

}）（）;