Creating a mask Layer
Copy Code code as follows:
_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 (opacity=50)";
newMask.style.opacity = "0.50";
NewMask.style.display = ' None ';
Document.body.appendChild (Newmask);
This._cover = Newmask;
}
New pop-up Layer
Copy Code code as follows:
_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;
}
Adjust the position of the projectile layer
Copy Code code as follows:
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";
}
Adjust position when screen scrolling events
Copy Code code as follows:
This._fs = Bindaseventlistener (this, this.addjustposition);
addEventHandler (window, "scroll", THIS._FS);
Hide after need
removeEventHandler (window, "scroll", THIS._FS);
Complete code
Copy Code code as follows:
var floater = (function () {
var me = class.create ();
Me.prototype = {
Initialize: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) {
options = Options | | {};
if (!this._cover) {
This._createcover ();
}
if (!this._floater) {
This._createfloater (HTML);
}
if (options.saveopt) {
This._saveoption = options.saveopt;
This.bindsaveevent ();
}
This._bindscrollevent ();
This.addjustposition ();
This._floater.style.display = ';
This._cover.style.display = ';
This.isshow = true;
},
Insert:function (Html,opts,att) {
var _e = document.createelement ("div"), _t;
_e.innerhtml = html;
For (var k in opts) {
_E[K] = opts[k];
}
_t = This._floater.queryselector (' [' +att+ '] ');
if (_t) {
_t.appendchild (_e);
}
},
Getfloater:function () {
if (this._floater) {
return this._floater;
}
},
Mask Layer
_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 (opacity=50)";
newMask.style.opacity = "0.50";
NewMask.style.display = ' None ';
Document.body.appendChild (Newmask);
This._cover = Newmask;
},
New pop-up Layer
_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;
},
Pop-up Layer Scrolling Center
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);
},
Hide: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;
}
};
return me;
})();