기본 J를 사용하여 팝업 레이어 효과를 구현하십시오

마스크 레이어를 만듭니다

코드 사본은 다음과 같습니다.

_createcover : function () {

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

newmask.id = this._mark;

newmask.style.position = "절대";

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 (불투명도 = 50)";

newmask.style.opacity = "0.50";

newmask.style.display = 'none';

Document.body.appendChild (Newmask);

this._cover = newmask;

}

새 팝업 레이어를 만듭니다

코드 사본은 다음과 같습니다.

_createfloater : 함수 (html) {

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

newdiv.id = this._id;

newdiv.style.position = "절대";

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 + docum

newdiv.style.padding = "5px";

newdiv.style.display = 'none';

newdiv.innerhtml = html;

document.body.appendchild (newdiv);

this._floater = newdiv;

}

탄성 층의 위치를 ​​조정하십시오

코드 사본은 다음과 같습니다.

부가 위치 : function () {

this._floater.style.top = (document.body.scrolltop + document.body.clientHeight/2 -NewDivHeight/2) + "px";

this._floater.style.left = (document.body.scrollleft + docum

}

화면 스크롤링 이벤트시 위치를 조정하십시오

코드 사본은 다음과 같습니다.

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

addeventhandler (창, "스크롤", this._fs);

// 숨기고 후에는 필요합니다

removeeventhandler (창, "스크롤", this._fs);

완전한 코드

코드 사본은 다음과 같습니다.

var floatater = (function () {

var me = class.create ();

me.prototype = {

초기화 : 함수 (옵션) {

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

this.setOptions (옵션);

},

세트 오프 : 함수 (옵션) {

this.options = 옵션 || {};

this._id = 옵션 .id;

this._mark = 'mark';

},

쇼 : 함수 (HTML, 옵션) {

옵션 = 옵션 || {};

if (! this._cover) {

this._createcover ();

}

if (! this._floater) {

this._createfloater (html);

}

if (Options.SaveOpt) {

this._saveoption = 옵션 .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;

for (var k in opts) {

_e [k] = opts [k];

}

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

if (_t) {

_T. AppendChild (_e);

}

},

getfloater : function () {

if (this._floater) {

this._floater;

}

},

// 마스크 레이어

_createcover : function () {

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

newmask.id = this._mark;

newmask.style.position = "절대";

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 (불투명도 = 50)";

newmask.style.opacity = "0.50";

newmask.style.display = 'none';

Document.body.appendChild (Newmask);

this._cover = newmask;

},

// 새로운 팝업 레이어

_createfloater : 함수 (html) {

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

newdiv.id = this._id;

newdiv.style.position = "절대";

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 + docum

newdiv.style.padding = "5px";

newdiv.style.display = 'none';

newdiv.innerhtml = html;

document.body.appendchild (newdiv);

this._floater = newdiv;

},

// 팝업 레이어가 중앙으로 스크롤됩니다

부가 위치 : function () {

this._floater.style.top = (document.body.scrolltop + document.body.clientHeight/2 -NewDivHeight/2) + "px";

this._floater.style.left = (document.body.scrollleft + docum

},

bindsaveEvent : function () {

이.

if (this._saveelem) {

addeventhandler (this._saveelem, "click", this._saveoption.handler);

}

},

_bindscrollevent : function () {

addeventhandler (창, "스크롤", this._fs);

},

숨기기 : function () {

this.isshow = false;

this.destory ();

},

DEARTORY : function () {

removeeventhandler (창, "스크롤", 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;

}

};

나를 돌려주십시오.

}) ();