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的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
限制只能输入数字的实现代码
May 16 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 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
杏林同学录(二)
2006/10/09 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
微信支付开发告警通知实例
2016/07/12 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
js实现无缝滚动图
2017/02/22 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
python flask 多对多表查询功能
2017/06/25 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python 列表理解及使用方法
2017/10/27 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
Django框架 信号调度原理解析
2019/09/04 Python
如何在python中判断变量的类型
2020/07/29 Python
八年级生物教学反思
2014/01/22 职场文书
中专生自荐信
2014/06/25 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL