Use native JS to implement pop-up layer special effect _ javascript skills

This article mainly introduces how to use native JS to implement pop-up layer special effects. For more information, see create a mask layer.

The code is as follows:

_ CreateCover: function (){
Var newMask = document. createElement ("p ");
NewMask. id = this. _ mark;
NewMask. style. position = "absolute ";
NewMask. style. zIndex = "100 ";
_ ScrollWidth = Math.max(document.body.scrollWidth,document.doc umentElement. scrollWidth );
_ ScrollHeight = Math.max(document.body.scrollHeight,document.doc umentElement. 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;
}

Create a pop-up layer

The code is as follows:

_ CreateFloater: function (html ){
Var newDiv = document. createElement ("p ");
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 bullet layer position

The code is 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 the position when a screen scroll event occurs

The code is as follows:

This. _ fS = BindAsEventListener (this, this. addjustPosition );
AddEventHandler (window, "scroll", this. _ fS );
// Hide
RemoveEventHandler (window, "scroll", this. _ fS );

Complete Code

The code is 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 ("p"), _ 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 ("p ");
NewMask. id = this. _ mark;
NewMask. style. position = "absolute ";
NewMask. style. zIndex = "100 ";
_ ScrollWidth = Math.max(document.body.scrollWidth,document.doc umentElement. scrollWidth );
_ ScrollHeight = Math.max(document.body.scrollHeight,document.doc umentElement. 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 ("p ");
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;
},
// Scroll center of the pop-up layer
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;
})();