ใช้ JS ดั้งเดิมเพื่อใช้เอฟเฟกต์เลเยอร์ป๊อปอัพ

สร้างเลเยอร์หน้ากาก

การคัดลอกรหัสมีดังนี้:

_CreateCover: function () {

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

newMask.id = this._mark;

newmask.style.position = "สัมบูรณ์";

newmask.style.zindex = "100";

_ScrollWidth = math.max (document.body.scrollwidth, documentEnumentElement.scrollWidth);

_scrollheight = math.max (document.body.scrollheight, documentEnumentElement.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 = 'ไม่มี';

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 + document.body.clientwidth/2 - newdivwidth/2) + "px";

newdiv.style.padding = "5px";

newdiv.style.display = 'ไม่มี';

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 (นี่คือสิ่งนี้ addjustposition);

AddeventHandler (หน้าต่าง "Scroll", this._fs);

// หลังจากซ่อนมันคุณต้อง

removeEventHandler (หน้าต่าง "เลื่อน", this._fs);

กรอกรหัส

การคัดลอกรหัสมีดังนี้:

var floater = (function () {

var me = class.create ();

me.prototype = {

เริ่มต้น: ฟังก์ชั่น (ตัวเลือก) {

this._fs = bindaseventListener (นี่คือสิ่งนี้ addjustposition);

this.setOptions (ตัวเลือก);

-

SetOptions: ฟังก์ชั่น (ตัวเลือก) {

this.options = ตัวเลือก || -

this._id = ตัวเลือก. id;

this._mark = 'mark';

-

แสดง: ฟังก์ชั่น (html, ตัวเลือก) {

ตัวเลือก = ตัวเลือก || -

if (! this._cover) {

this._CreateCover ();

-

ถ้า (! this._floater) {

this._CreateFloater (HTML);

-

if (opptionss.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;

สำหรับ (var k ใน opts) {

_e [k] = opts [k];

-

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

ถ้า (_t) {

_t.AppendChild (_e);

-

-

getFloater: function () {

if (this._floater) {

ส่งคืนสิ่งนี้ _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, documentEnumentElement.scrollWidth);

_scrollheight = math.max (document.body.scrollheight, documentEnumentElement.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 = 'ไม่มี';

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 + document.body.clientwidth/2 - newdivwidth/2) + "px";

newdiv.style.padding = "5px";

newdiv.style.display = 'ไม่มี';

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, "คลิก", ​​this._saveoption.handler);

-

-

_bindscrollevent: function () {

AddeventHandler (หน้าต่าง "Scroll", this._fs);

-

ซ่อน: ฟังก์ชั่น () {

this.isshow = false;

this.destory ();

-

destory: function () {

removeEventHandler (หน้าต่าง "เลื่อน", 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;

-

-

กลับฉัน;

-