使用原生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 相关文章推荐
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 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扩展ZF――Validate扩展
2008/01/10 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python list转置和前后反转的例子
2019/08/26 Python
python软件都是免费的吗
2020/06/18 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
路政管理专业个人自荐信范文
2013/11/30 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
Java字符串逆序方法详情
2022/03/21 Java/Android
MySQL数据库查询之多表查询总结
2022/08/05 MySQL
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android