js实现类bootstrap模态框动画


Posted in Javascript onFebruary 07, 2017

在pc端开发,模态框是一个很常用的插件,之前一直用的第三方插件,比如bootstrap,jQuery的模态框插件,最近还用了elementUI的。但是会发现其实动画效果都差不多,那么如何去实现这样一个动画效果呢?

模态框的构成

 常见的模态框的结构我们很容易就可以看出,一个遮罩层,还有内容区。内容区主要是头部(包括标题,关闭按钮)和body部分(body中常常会有确认和取消按钮)。

布局

 1.背景要充满全屏,而且如果页面有滚动,当模态框弹出的时候是无法滚动的;
 2.内容区要水平居中显示,至于垂直方向看设计喽;
 3.模态框出现是渐渐显示出来,而且从顶部滑下;

实现

 遮罩使用最外层元素占满全屏(position:fixed;),并设置背景色不透明度(rgba(0,0,0,0.5))。
 水平居中有很多方式,这里使用

margin:30px auto;

重点介绍下关于模态框动画的实现

 关于渐渐显示使用opacity就可以,而从顶部滑下使用translate也很容易实现。这么看来,很容易做嘛,只需要改变classname就可以了。
html

<input type="button" value="click" id="btn">
<div class="modal" id="modal">
  <div class="dialog">
    <header class="dialog-header">
      <h3>this is dialog title</h3>
      <span id="close">×</span>
    </header>
    <div class="dialog-content">
      this is dialog content
     </div>
   </div>
</div>

style

.modal{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    display:none;
    z-index:1050;
    opacity:0;
    transition: all .5s ease-out 0s;
  }
  .dialog{
    width:500px;
    height:300px;
    position:relative;
    box-shadow:0 5px 15px rgba(0,0,0,.5);
    border-radius:10px;
    background-color:#fff;
    margin:30px auto;
    transform: translate(0,-40%);
    -webkit-transform: translate(0,-40%);
    transition: all .5s ease-out 0s;
  }
  .dialog-header{
    box-sizing:border-box;
    border-bottom:1px solid #ccc;
  }
  .dialog-header h3,.dialog-header span{
    display:inline-block;
  }
  .dialog-header span{
    float:right;
    margin-right:10px;
    overflow: hidden;
    line-height:58px;
    cursor:default;
    font-size:18px;
  }
  .in{
    opacity: 1;
  }
  .in .dialog{
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
  }

js

var oBtn = document.getElementById("btn");
var oModal = document.getElementById("modal");
var oClose = document.getElementById("close");
oBtn.addEventListener("click", function(){
  oModal.style.display = "block";
  oModal.className = "modal in";
});
oClose.addEventListener("click", function(){
  oModal.style.display = "none";
  oModal.className = "modal";
});

是不是看起来很容易,运行之后,诶?并没有我们所希望看到的动画效果,这是为什么呢?当我们点击按钮的时候不是已经把动画加上了么?

其实仔细想想,点击按钮改变classname的时候,是一下子把元素display和动画属性全都加上了,当模态框显示出来的时候动画也随着完成了,就类似于打开一个html页面一样,页面元素的css属性都在页面渲染的时候发挥了作用。而我们在页面直接去触发一个已经显示出来的元素动画的时候是有效的。所以我们需要把元素显示和动画分开来做。

这里我做了一个异步操作(setTimeout)。

oModal.style.display = "block";
  var timer = setTimeout(function(){
    oModal.className = "modal in";
    clearTimeout(timer);
  },0);

元素显示出来之后在给它加动画效果,这样就可以实现我们所期望的动画效果了。
所有代码在github上https://github.com/Stevenzwzhai/plugs/tree/master/dialog,在这个项目下有多个js的常用插件,欢迎点赞。

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

Javascript 相关文章推荐
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
canvas实现探照灯效果
Feb 07 #Javascript
javascript数据类型详解
Feb 07 #Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 #Javascript
vuejs指令详解
Feb 07 #Javascript
fullCalendar中文API官方文档
Feb 07 #Javascript
JS常用倒计时代码实例总结
Feb 07 #Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 #Javascript
You might like
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
Prototype Object对象 学习
2009/07/12 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
pywinauto自动化操作记事本
2019/08/26 Python
python删除某个目录文件夹的方法
2020/05/26 Python
利用python 下载bilibili视频
2020/11/13 Python
Linux上比较文件的命令都有哪些
2013/09/28 面试题
优秀通讯员事迹材料
2014/01/28 职场文书
住宅使用说明书
2014/05/09 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
Python数组变形的几种实现方法
2022/05/30 Python