使用原生JS实现弹出层特效


Posted in Javascript onDecember 22, 2014

创建遮罩层

  _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;

 })();
Javascript 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
jQuery基础知识小结
Dec 22 #Javascript
jQuery异步获取json数据方法汇总
Dec 22 #Javascript
jQuery的观察者模式详解
Dec 22 #Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 #Javascript
sails框架的学习指南
Dec 22 #Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 #Javascript
javascript动态创建及删除元素的方法
Dec 22 #Javascript
You might like
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
2014年毕业演讲稿范文
2014/05/13 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js