使用原生JS实现弹出层特效
束俊英
本文向大家介绍使用原生JS实现弹出层特效，包括了使用原生JS实现弹出层特效的使用技巧和注意事项，需要的朋友参考一下
创建遮罩层
_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;
}
调节弹层位置
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, "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;
},
//弹出层滚动居中
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;
})();
类似资料：
-
本文向大家介绍原生js实现弹出层效果，包括了原生js实现弹出层效果的使用技巧和注意事项，需要的朋友参考一下 知识要点 1.遮罩层的宽度和高度是js获取页面的宽高（页面内容） 2.登录框设置静止定位fixed 3.登录框居中显示公式：(可视区域宽高-登录框宽高)/2 完整代码 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍原生js实现弹幕效果，包括了原生js实现弹幕效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现弹幕效果的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍js实现div弹出层的方法，包括了js实现div弹出层的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现div弹出层的方法。分享给大家供大家参考。具体分析如下： 话说现在各种插件出来了要实现弹出层真是太简单了，但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西，下面来给各位分享一个原生太js div弹出层实例，有需要的朋友可一起看看。 这个不用多说了,直接
-
本文向大家介绍jquery实现可拖拽弹出层特效，包括了jquery实现可拖拽弹出层特效的使用技巧和注意事项，需要的朋友参考一下 功能很简单，却非常的实用，代码更加的简洁，这里就不多废话了 奉上源码：
-
本文向大家介绍原生js实现放大镜特效，包括了原生js实现放大镜特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现放大镜特效的具体代码，供大家参考，具体内容如下 掌握页面元素定位和移动 放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置定位大图片的相应位置 技术点：事件捕获、定位 offsetLeft与style.left的对比： 1）offsetLeft是与
-
本文向大家介绍JS简单实现动画弹出层效果，包括了JS简单实现动画弹出层效果的使用技巧和注意事项，需要的朋友参考一下 JS简单实现动画弹出层效果 以上所述就是本文的全部内容了，希望大家能够喜欢。