Use JS nativo para implementar efeitos de camada pop-up

Crie uma camada de máscara

A cópia do código é a seguinte:

_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);

_scrolHeight = Math.max (document.body.scrolHeight, document.documentElement.scrolHeight);

newmask.style.width = _scrollwidth + "px";

newmask.style.Height = _ScrolHeight + "px";

newmask.style.top = "0px";

newmask.style.left = "0px";

newmask.style.background = "#000";

newmask.style.filter = "alpha (opacidade = 50)";

newmask.style.opacity = "0,50";

newmask.style.display = 'nenhum';

document.body.appendChild (NewMask);

this._cover = newMask;

}

Crie uma nova camada pop-up

A cópia do código é a seguinte:

_createfloater: function (html) {

var newDiv = document.createElement ("div");

newdiv.id = this._id;

newdiv.style.position = "absoluto";

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 = 'nenhum';

newdiv.innerhtml = html;

document.body.appendChild (newDiv);

this._floater = newDiv;

}

Ajuste a posição da camada elástica

A cópia do código é a seguinte:

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";

}

Ajuste a posição quando os eventos de rolagem de tela

A cópia do código é a seguinte:

this._fs = bindaseventListener (this, this.addjustPosition);

addEventHandler (janela, "rolagem", this._fs);

// Depois de escondê -lo, você precisa

removereventHandler (janela, "rolagem", this._fs);

Código completo

A cópia do código é a seguinte:

var Floater = (function () {

var Me = Class.Create ();

me.prototype = {

inicializar: function (opções) {

this._fs = bindaseventListener (this, this.addjustPosition);

this.setOptions (opções);

},

Setoptions: function (options) {

this.options = Opções || {};

this._id = options.id;

this._mark = 'Mark';

},

Mostrar: function (html, opções) {

Opções = Opções || {};

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;

},

inserir: function (html, opts, att) {

var _e = document.createElement ("div"), _t;

_e.innerhtml = html;

para (var k em opts) {

_e [k] = opta [k];

}

_t = this._floater.QuerySelector ('['+att+']');

if (_t) {

_t.appendChild (_e);

}

},

getfloater: function () {

if (this._floater) {

devolver this._floater;

}

},

// camada de máscara

_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);

_scrolHeight = Math.max (document.body.scrolHeight, document.documentElement.scrolHeight);

newmask.style.width = _scrollwidth + "px";

newmask.style.Height = _ScrolHeight + "px";

newmask.style.top = "0px";

newmask.style.left = "0px";

newmask.style.background = "#000";

newmask.style.filter = "alfa (opacidade = 50)";

newmask.style.opacity = "0,50";

newmask.style.display = 'nenhum';

document.body.appendChild (NewMask);

this._cover = newMask;

},

// nova camada pop-up

_createfloater: function (html) {

var newDiv = document.createElement ("div");

newdiv.id = this._id;

newdiv.style.position = "absoluto";

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 = 'nenhum';

newdiv.innerhtml = html;

document.body.appendChild (newDiv);

this._floater = newDiv;

},

// A camada pop-up é rolada para o centro

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, "clique", this._saveOption.Handler);

}

},

_bindscrollevent: function () {

addEventHandler (janela, "rolagem", this._fs);

},

ocultar: function () {

this.isshow = false;

this.Destory ();

},

Destory: function () {

removereventHandler (janela, "rolagem", this._fs);

if (this._saveElem) {

removaeventHandler (this._saveElem, "clique", 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;

}

};

me devolva;

}) ();