这篇文章主要介绍了使用原生 JS 实现弹出层特效, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
创建遮罩层
- _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;
- })();
来源: