javascript实现弹出层效果


Posted in Javascript onDecember 10, 2019

弹出层和弹窗相似但是并不相同;弹窗和弹出层都是由用户触发的显示提示信息的弹出面板;但是弹窗只是显示一些信息,没有太多的复杂的交互事件;而弹层类似一个整个页面,可以实现页面的所有功能;

现在前端弹层使用的很频繁,如支付宝支付弹层等…所以掌握弹层是一个很重要的技能。如果只是简单的隐藏和切换,当然就不必说,我要说的html+animate+es6实现弹层;

javascript实现弹出层效果

javascript实现弹出层效果

javascript实现弹出层效果

javascript实现弹出层效果

html弹层结构:

<main class="main">
 <header class="head flex-center gray-theme">This is Header</header>
 <section class="body flex-center">
  <ul class="btn-list flex-center btn-group">
  <li class="btn-box"><span class="btn inline-flex-center" data-position="top">上弹层</span></li>
  <li class="btn-box"><span class="btn inline-flex-center" data-position="right">右弹层</span></li>
  <li class="btn-box"><span class="btn inline-flex-center" data-position="bottom">下弹层</span></li>
  <li class="btn-box"><span class="btn inline-flex-center" data-position="left">左弹层</span></li>
  </ul>
 </section>
 <footer class="foot flex-center gray-theme">This is Footer</footer>
 <!-- popup -->
 <section class="popup flex-center hide hidden">
  <section class="popup-bg"></section>
  <section class="popup-wrapper">
  <header class="title head flex-center"></header>
  <section class="container body flex-center"></section>
  <footer class="btn-wrapper foot flex-center">
   <ul class="btn-list flex-center">
   <li class="btn-box"><span class="btn cancel inline-flex-center">取消</span></li>
   <li class="btn-box"><span class="btn confirm inline-flex-center">确认</span></li>
   </ul>
  </footer>
  </section>
 </section>
</main>

css代码:

@mixin slide-top{
 0%{
 -webkit-transform: translate3d(0, -400%, 0);
 -moz-transform: translate3d(0, -400%, 0);
 -ms-transform: translate3d(0, -400%, 0);
 -o-transform: translate3d(0, -400%, 0);
 transform: translate3d(0, -400%, 0);
 }
 100%{
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }
}

@keyframes slideTop{
 @include slide-top;
}

@-webkit-keyframes slideTop{
 @include slide-top;
}

@mixin slide-top-hide{
 0%{
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }
 100%{
 -webkit-transform: translate3d(0, -400%, 0);
 -moz-transform: translate3d(0, -400%, 0);
 -ms-transform: translate3d(0, -400%, 0);
 -o-transform: translate3d(0, -400%, 0);
 transform: translate3d(0, -400%, 0);
 }
}

@keyframes slideTopHide{
 @include slide-top-hide;
}

@-webkit-keyframes slideTopHide{
 @include slide-top-hide;
}

@mixin slide-right{
 0%{
 -webkit-transform: translate3d(400%, 0, 0);
 -moz-transform: translate3d(400%, 0, 0);
 -ms-transform: translate3d(400%, 0, 0);
 -o-transform: translate3d(400%, 0, 0);
 transform: translate3d(400%, 0, 0);
 }
 100%{
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }
}

@keyframes slideRight{
 @include slide-right;
}

@-webkit-keyframes slideRight{
 @include slide-right;
}

@mixin slide-right-hide{
 0%{
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }
 100%{
 -webkit-transform: translate3d(400%, 0, 0);
 -moz-transform: translate3d(400%, 0, 0);
 -ms-transform: translate3d(400%, 0, 0);
 -o-transform: translate3d(400%, 0, 0);
 transform: translate3d(400%, 0, 0);
 }
}

@keyframes slideRightHide{
 @include slide-right-hide;
}

@-webkit-keyframes slideRightHide{
 @include slide-right-hide;
}

@mixin slide-bottom{
 0%{
 -webkit-transform: translate3d(0, 400%, 0);
 -moz-transform: translate3d(0, 400%, 0);
 -ms-transform: translate3d(0, 400%, 0);
 -o-transform: translate3d(0, 400%, 0);
 transform: translate3d(0, 400%, 0);
 }
 100%{
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }
}

@keyframes slideBottom{
 @include slide-bottom;
}

@-webkit-keyframes slideBottom{
 @include slide-bottom;
}

@mixin slide-bottom-hide{
 0%{
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }
 100%{
 -webkit-transform: translate3d(0, 400%, 0);
 -moz-transform: translate3d(0, 400%, 0);
 -ms-transform: translate3d(0, 400%, 0);
 -o-transform: translate3d(0, 400%, 0);
 transform: translate3d(0, 400%, 0);
 }
}

@keyframes slideBottomHide{
 @include slide-bottom-hide;
}

@-webkit-keyframes slideBottomHide{
 @include slide-bottom-hide;
}

@mixin slide-left{
 0%{
 -webkit-transform: translate3d(-400%, 0, 0);
 -moz-transform: translate3d(-400%, 0, 0);
 -ms-transform: translate3d(-400%, 0, 0);
 -o-transform: translate3d(-400%, 0, 0);
 transform: translate3d(-400%, 0, 0);
 }
 100%{
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }
}

@keyframes slideLeft{
 @include slide-left;
}

@-webkit-keyframes slideLeft{
 @include slide-left;
}

@mixin slide-left-hide{
 0%{
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }
 100%{
 -webkit-transform: translate3d(-400%, 0, 0);
 -moz-transform: translate3d(-400%, 0, 0);
 -ms-transform: translate3d(-400%, 0, 0);
 -o-transform: translate3d(-400%, 0, 0);
 transform: translate3d(-400%, 0, 0);
 }
}

@keyframes slideLeftHide{
 @include slide-left-hide;
}

@-webkit-keyframes slideLeftHide{
 @include slide-left-hide;
}

@mixin popup-hide{
 0%{
 z-index: 99999;
 opacity: 1;
 }
 100%{
 z-index: -1;
 opacity: 0;
 }
}

@keyframes popupHide{
 @include popup-hide;
}

@-webkit-keyframes popupHide{
 @include popup-hide;
}

.popup{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 opacity: 0;
 .popup-bg{
 position: absolute;
 top: 0;
 left: 0;
 background: rgba(0,0,0, 0.5);
 width: 100%;
 height: 100%;
 z-index: 1;
 }
 .popup-wrapper{
 position: relative;
 width: 70%;
 height: 70%;
 margin: auto;
 background: #fff;
 border-radius: 5%;
 z-index: 100;
 }
 &.hidden{
 display: none;
 }
 &.show{
 z-index: 99999;
 opacity: 1;
 &.top{
  .popup-wrapper{
  -webkit-animation: slideTop 0.6s linear forwards;
  -moz-animation: slideTop 0.6s linear forwards;
  -ms-animation: slideTop 0.6s linear forwards;
  -o-animation: slideTop 0.6s linear forwards;
  animation: slideTop 0.6s linear forwards;
  }
 }
 &.right{
  .popup-wrapper{
  -webkit-animation: slideRight 0.6s linear forwards;
  -moz-animation: slideRight 0.6s linear forwards;
  -ms-animation: slideRight 0.6s linear forwards;
  -o-animation: slideRight 0.6s linear forwards;
  animation: slideRight 0.6s linear forwards;
  }
 }
 &.bottom{
  .popup-wrapper{
  -webkit-animation: slideBottom 0.6s linear forwards;
  -moz-animation: slideBottom 0.6s linear forwards;
  -ms-animation: slideBottom 0.6s linear forwards;
  -o-animation: slideBottom 0.6s linear forwards;
  animation: slideBottom 0.6s linear forwards;
  }
 }
 &.left{
  .popup-wrapper{
  -webkit-animation: slideLeft 0.6s linear forwards;
  -moz-animation: slideLeft 0.6s linear forwards;
  -ms-animation: slideLeft 0.6s linear forwards;
  -o-animation: slideLeft 0.6s linear forwards;
  animation: slideLeft 0.6s linear forwards;
  }
 }
 }
 &.hide{
 -webkit-animation: popupHide 0.7s linear forwards;
 -moz-animation: popupHide 0.7s linear forwards;
 -ms-animation: popupHide 0.7s linear forwards;
 -o-animation: popupHide 0.7s linear forwards;
 animation: popupHide 0.7s linear forwards;
 &.top{
  .popup-wrapper{
  -webkit-animation: slideTopHide 0.6s linear forwards;
  -moz-animation: slideTopHide 0.6s linear forwards;
  -ms-animation: slideTopHide 0.6s linear forwards;
  -o-animation: slideTopHide 0.6s linear forwards;
  animation: slideTopHide 0.6s linear forwards;
  }
 }
 &.right{
  .popup-wrapper{
  -webkit-animation: slideRightHide 0.6s linear forwards;
  -moz-animation: slideRightHide 0.6s linear forwards;
  -ms-animation: slideRightHide 0.6s linear forwards;
  -o-animation: slideRightHide 0.6s linear forwards;
  animation: slideRightHide 0.6s linear forwards;
  }
 }
 &.bottom{
  .popup-wrapper{
  -webkit-animation: slideBottomHide 0.6s linear forwards;
  -moz-animation: slideBottomHide 0.6s linear forwards;
  -ms-animation: slideBottomHide 0.6s linear forwards;
  -o-animation: slideBottomHide 0.6s linear forwards;
  animation: slideBottomHide 0.6s linear forwards;
  }
 }
 &.left{
  .popup-wrapper{
  -webkit-animation: slideLeftHide 0.6s linear forwards;
  -moz-animation: slideLeftHide 0.6s linear forwards;
  -ms-animation: slideLeftHide 0.6s linear forwards;
  -o-animation: slideLeftHide 0.6s linear forwards;
  animation: slideLeftHide 0.6s linear forwards;
  }
 }
 }

}

html,
body,
.main{
 width: 100%;
 height: 100%;
 overflow: hidden;
}

.head,
.body,
.foot{
 width: 100%;
}

.head,
.foot{
 height: 15%;
}

.body{
 height: 70%;
}

.gray-theme{
 background: #333;
 color: #fff;
}

.btn-list{
 width: 40%;
 min-width: 270px;
 height: 38px;
 .btn-box{
 width: 22%;
 height: 100%;
 padding-right: 4%;
 &:last-child{
  padding-right: 0;
 }
 }
}

.btn{
 line-height: 1em;
 width: 100%;
 height: 100%;
 border-radius: 10%;
 font-size: 16px;
 background: green;
 color: #ff0;
 text-align: center;
 vertical-align: middle;
 cursor: pointer;
}

js代码:

class PopupComponent {
 constructor() {
  this.btnGroupEl = document.getElementsByClassName("btn-group")[0];
  this.popupEl = document.getElementsByClassName("popup")[0];
  this.popupBGEl = this.popupEl.querySelector(".popup-bg");
  this.popupTitleEl = this.popupEl.querySelector(".popup-wrapper .title");
  this.popupBodyEl = this.popupEl.querySelector(".popup-wrapper .body");
  this.cancelBtnEl = this.popupEl.querySelector(".popup-wrapper .btn.cancel");
  this.confirmBtnEl = this.popupEl.querySelector(".popup-wrapper .btn.confirm");
  this.popupElClasslist = this.popupEl.classList;
  this.LEGVALS = ["top", "right", "bottom", "left"];
  this.detaultPosition = "";
  this.position = "";
  this.SHOWCLASSNAME = "show";
  this.HIDECLASSNAME = "hide";
  this.HIDDENCLASSNAME = "hidden";
 }

 /**
  * 给弹窗的标题和主体添加内容
  * @param Object contentObj 传递的对象
  */
 setContentForPopup(contentObj = {'title':'title', 'body': 'body'}) {
  try{
  if (!TB.isObject(contentObj)) {
   throw new Error("The param of setContentForPopup function error!");
  }
  let value;
  for (let prop in contentObj) {
   if (!contentObj.hasOwnProperty(prop)) {
   continue;
   }

   if (prop === 'title') {
   value = contentObj[prop];
   this.popupTitleEl.innerText = value;
   }

   if (prop === 'body') {
   value = contentObj[prop];
   this.popupBodyEl.innerText = value;
   }
  }
  } catch (e) {
  console.log("Popup element is not exist!");
  console.error(e);
  }
 }

 /**
  * 删除弹窗的类名
  * @return void
  */
 deletePopupPreviousClassName() {
  if (this.HIDDENCLASSNAME && KB.checkType.isString(this.HIDDENCLASSNAME)) {
  this.popupElClasslist.remove(this.HIDDENCLASSNAME);
  }

  if (this.detaultPosition && KB.checkType.isString(this.detaultPosition)) {
  this.popupElClasslist.remove(this.detaultPosition);
  }

  this.detaultPosition = this.position;
 }

 /**
  * 弹窗隐藏
  * @return void
  */
 popupHide() {
  if (this.popupElClasslist.contains(this.SHOWCLASSNAME)) {
  this.popupElClasslist.remove(this.SHOWCLASSNAME);
  this.popupElClasslist.add(this.HIDECLASSNAME);
  }
 }

 /**
  * 弹窗显示
  * @return void
  */
 popupShow() {
  this.deletePopupPreviousClassName();  
  if (this.popupElClasslist.contains(this.HIDECLASSNAME)) {
  this.popupElClasslist.remove(this.HIDECLASSNAME);
  this.popupElClasslist.add(this.SHOWCLASSNAME);
  this.popupElClasslist.add(this.position);
  }

  this.setContentForPopup({
  'title': this.position + ' title',
  'body': this.position + ' body',
  });
 }

 /**
  * 按钮容器的点击事件
  * @param Object e 点击的事件event
  * @return void
  */
 btnGroupClickEvent(e) {
  let btnEl = e.target || e.srcElement;
  if (!TB.isElement(btnEl)) {
  throw new Error("Get btn element error!");
  }
  this.position = btnEl.getAttribute("data-position");
  if (!TB.isString(this.position) || (this.LEGVALS.indexOf(this.position) < 0)) {
  throw new Error("Can not get position value from btn element!");
  }
  this.popupShow();

 }

 /**
  * 给DOM元素添加点击事件
  * @param Object elem 添加点击事件的dom元素 
  * @param Function fn  触发事件调用的回调函数
  */
 addClickEventFormElem(elem, fn) {
  TB.addHandler.call(this, elem, 'click', fn, false);
 }

 /**
  * 初始化函数
  * @return void
  */
 init() {
  this.addClickEventFormElem(this.btnGroupEl, this.btnGroupClickEvent);
  this.addClickEventFormElem(this.cancelBtnEl, this.popupHide);
  this.addClickEventFormElem(this.confirmBtnEl, this.popupHide);
 }
 }

 let popupComponent = new PopupComponent();
 popupComponent.init();

TB.addHandler:

/*
* 给DOM元素添加事件
* @param void
* @return callback function 回调函数
* */
function addHandler(elem, type, callback, useCapture) {
 var checkType = checkArgumentType(),
 _document = document,
 _callback = checkType.isFunction(callback)? callback:function(){},
 _self = this;

 if (!checkType.isElement(elem) || !checkType.isString(type)) {
 return;
 }

 if (_document.addEventListener) {
 addHandler = function(elem, type, callback, useCapture) {
  elem.addEventListener(type, function(e) {
  _callback.call(_self, e);
  }, useCapture || false); 
 }
 } else if (_document.attachEvent) {
 addHandler = function(elem, type, callback, useCapture) {
  elem.attachEvent("on" + type, function(e){
  _callback.apply(_self, [e]);
  }); 
 }
 } else {
 addHandler = function(elem, type, callback, useCapture) {
  elem["on" + type] = function(e) {
  _callback.call(_self, e);
  };
 }
 }
 addHandler(elem, type, callback, useCapture);
}

首先说一下弹窗的DOM结构:
在外层一般是绝对定位,并使用flex布局使得内容居中;它的直接子元素一般有两个,黑色背景层和内容容器;如图所示:

javascript实现弹出层效果

样式的动画相信前端的同学一般都知道怎么做;但是有一点要注意,不要试图使用display来实现动画;
我使用的解决的办法是首先

动画的显示隐藏使用的z-index和opacity;但是这样存在开始时,弹窗会缓缓隐藏,那么我们可以用一个类表示display: none;点击显示弹层时,移除该类即可;

对于js没什么好说的,无非是操作类名;但是有一点要注意事件注册和this的指向;
注意我的addHandler函数,该函数只会判断一次浏览器的环境,不需要反复的判断浏览器的环境;
在btnGroupClickEvent函数中this是指向PopupComponent类,而不是事件的event;所以addHandler函数中首先保存this的指向,然后使用call或者apply改变this的指向

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
JS简单计算器实例
Jan 20 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 #Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 #Javascript
微信小程序登陆注册功能的实现代码
Dec 10 #Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 #Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 #Javascript
原生js实现随机点餐效果
Dec 10 #Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 #Javascript
You might like
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
php上传大文件设置方法
2016/04/14 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
python实现用户登录系统
2016/05/21 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
基于Python log 的正确打开方式
2018/04/28 Python
python中实现字符串翻转的方法
2018/07/11 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python实现多层感知器
2019/01/18 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
学生生病请假条范文
2014/02/16 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
违章停车检讨书
2014/10/21 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS