使用原生JS實(shí)現(xiàn)彈出層特效
創(chuàng)建遮罩層
_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);
_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(opacity=50)";
newMask.style.opacity = "0.50";
newMask.style.display = 'none';
document.body.appendChild(newMask);
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;
}
調(diào)節(jié)彈層位置
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";
}
屏幕滾動(dòng)事件時(shí)調(diào)整位置
this._fS = BindAsEventListener(this, this.addjustPosition);
addEventHandler(window, "scroll", this._fS);
// 隱藏后需
removeEventHandler(window, "scroll", this._fS);
完整代碼
var Floater = (function(){
var me = Class.create();
me.prototype = {
initialize: function(options) {
this._fS = BindAsEventListener(this, this.addjustPosition);
this.setOptions(options);
},
setOptions: function(options) {
this.options = options || {};
this._id = options.id;
this._mark = 'mark';
},
show: function(html,options) {
options = 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;
},
insert: function(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){
return this._floater;
}
},
//遮罩層
_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);
_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(opacity=50)";
newMask.style.opacity = "0.50";
newMask.style.display = 'none';
document.body.appendChild(newMask);
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;
},
//彈出層滾動(dòng)居中
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, "scroll", this._fS);
},
hide: function() {
this.isShow = false;
this.destory();
},
destory: function() {
removeEventHandler(window, "scroll", 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;
}
};
return me;
})();
相關(guān)文章
javascript將DOM節(jié)點(diǎn)添加到文檔的方法實(shí)例分析
這篇文章主要介紹了javascript將DOM節(jié)點(diǎn)添加到文檔的方法,對(duì)比分析了javascript的兩種節(jié)點(diǎn)創(chuàng)建的方法,涉及javascript節(jié)點(diǎn)操作及運(yùn)行時(shí)間計(jì)算的相關(guān)技巧,需要的朋友可以參考下2015-08-08javascript設(shè)計(jì)模式 – 中介者模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 中介者模式,結(jié)合實(shí)例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04js動(dòng)態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù)
本節(jié)主要介紹了js動(dòng)態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù),需要的朋友可以參考下2014-07-07Cropper.js進(jìn)階實(shí)現(xiàn)圖片旋轉(zhuǎn)裁剪處理功能示例
這篇文章主要為大家介紹了Cropper.js進(jìn)階實(shí)現(xiàn)圖片旋轉(zhuǎn)裁剪功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05js實(shí)現(xiàn)前面自動(dòng)補(bǔ)全位數(shù)的方法
今天小編就為大家分享一篇js實(shí)現(xiàn)前面自動(dòng)補(bǔ)全位數(shù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)頁(yè)面
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)頁(yè)面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07微信小程序swiper禁止用戶(hù)手動(dòng)滑動(dòng)代碼實(shí)例
這篇文章主要介紹了微信小程序swiper禁止用戶(hù)手動(dòng)滑動(dòng)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08js自定義trim函數(shù)實(shí)現(xiàn)刪除兩端空格功能
這篇文章主要介紹了js自定義trim函數(shù)實(shí)現(xiàn)刪除兩端空格功能,結(jié)合實(shí)例形式分析了javascript基于正則替換實(shí)現(xiàn)類(lèi)似trim函數(shù)刪除字符串兩端空格的相關(guān)操作技巧,并附帶jQuery類(lèi)似功能函數(shù)使用方法,需要的朋友可以參考下2018-02-02