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 相关文章推荐
js实现的点击数量加一可操作数据库
May 09 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
Js的Array数组对象详解
Feb 22 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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写的采集程序
2007/03/16 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
js jquery数组介绍
2012/07/15 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python中super()函数简介及用法分享
2016/07/11 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
中专生求职自荐信范文
2013/12/22 职场文书
战略合作意向书范本
2014/04/01 职场文书
在校实习生求职信
2014/06/18 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers