Используйте Native JS для реализации эффектов всплывающего окна.

Создать слой маски

Кода -копия выглядит следующим образом:

_createCover: function () {

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

newmask.id = this._mark;

newmask.style.position = "Absolute";

newmask.style.zindex = "100";

_scrollwidth = math.max (document.brollwidth, 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 (непрозрачность = 50)";

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

newmask.style.display = 'none';

document.body.appendchild (новичка);

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, "scrolk", this._fs);

// после того, как он скрывал, вам нужно

Удалить Eventhandler (окно, "Свитка", this._fs);

Полный код

Кода -копия выглядит следующим образом:

var floater = (function () {

var me = class.create ();

me.prototype = {

инициализировать: function (options) {

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

this.setoptions (опции);

},

setOptions: function (options) {

this.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 = options.saveopt;

this.bindsaveevent ();

}

this._bindscrollevent ();

this.addjustposition ();

this._floater.style.display = '';

this._cover.style.display = '';

this.isshow = true;

},

Вставка: функция (html, opts, att) {

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

_e.innerhtml = html;

для (var k in opts) {

_e [k] = opts [k];

}

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

if (_t) {

_T.AppendChild (_e);

}

},

getfloater: function () {

if (this._floater) {

вернуть это._floater;

}

},

// маска слой

_createCover: function () {

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

newmask.id = this._mark;

newmask.style.position = "Absolute";

newmask.style.zindex = "100";

_scrollwidth = math.max (document.brollwidth, 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 (непрозрачность = 50)";

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

newmask.style.display = 'none';

document.body.appendchild (новичка);

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, "scrolk", this._fs);

},

скрыть: function () {

this.isshow = false;

this.destory ();

},

destory: function () {

Удалить Eventhandler (окно, "Свитка", this._fs);

if (this._saveelem) {

removeEventhandler (this._saveelem, «Щелкни», 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;

}

};

вернуть меня;

}) ();