Use JS nativo para implementar efectos de capa emergente

Crear una capa de máscara

La copia del código es la siguiente:

_createCover: functer () {

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 = "alfa (opacidad = 50)";

Newmask.style.opacity = "0.50";

Newmask.style.display = 'Ninguno';

document.body.appendChild (Newmask);

this._cover = novato;

}

Crear una nueva capa emergente

La copia del código es la siguiente:

_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 = 'Ninguno';

newDiv.innerhtml = html;

document.body.appendChild (newDiv);

this._floater = newDiv;

}

Ajustar la posición de la capa elástica

La copia del código es la siguiente:

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 la posición cuando los eventos de desplazamiento de la pantalla

La copia del código es la siguiente:

this._fs = bindaseVentListener (this, this.addJustPosition);

addEventHandler (ventana, "desplazamiento", this._fs);

// Después de esconderlo, necesitas

RemoVEventHandler (ventana, "desplazarse", this._fs);

Código completo

La copia del código es la siguiente:

var floater = (function () {

var me = class.create ();

me.prototype = {

inicializar: function (opciones) {

this._fs = bindaseVentListener (this, this.addJustPosition);

this.setOptions (opciones);

},

setOptions: function (options) {

this.options = Opciones || {};

this._id = options.id;

this._mark = 'Mark';

},

show: function (html, options) {

Opciones = Opciones || {};

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 = verdadero;

},

insertar: function (html, opts, att) {

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

_e.innerhtml = html;

para (var k en opts) {

_e [k] = opts [k];

}

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

if (_t) {

_t.appendChild (_e);

}

},

getFloater: function () {

if (this._floater) {

devolver esto._floater;

}

},

// capa de máscara

_createCover: functer () {

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 = "alfa (opacidad = 50)";

Newmask.style.opacity = "0.50";

Newmask.style.display = 'Ninguno';

document.body.appendChild (Newmask);

this._cover = novato;

},

// nueva capa emergente

_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 = 'Ninguno';

newDiv.innerhtml = html;

document.body.appendChild (newDiv);

this._floater = newDiv;

},

// La capa emergente se desplaza al 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: functer () {

this._saveelem = this._floater.queryselector ('['+this._saveOption.elem+']');

if (this._saveelem) {

addEventHandler (this._saveElem, "haga clic", this._saveOption.handler);

}

},

_bindscrollevent: function () {

addEventHandler (ventana, "desplazamiento", this._fs);

},

ocultar: function () {

this.isshow = false;

this.destory ();

},

Destory: function () {

RemoVEventHandler (ventana, "desplazarse", this._fs);

if (this._saveelem) {

removeventhandler (this._saveElem, "haga clic", 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;

}

};

devolverme;

}) ();