マスクレイヤーを作成します
コードコピーは次のとおりです。
_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;
}
};
私を返してください。
})();