js实现类bootstrap模态框动画

 更新时间:2021年10月11日 11:39:19   作者:Stevenzhai  
这篇文章主要为大家详细介绍了js实现类bootstrap模态框动画的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

模态框的构成

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

布局

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

实现

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

margin:30px auto;

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

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

html

1
2
3
4
5
6
7
8
9
10
11
12
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.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

1
2
3
4
5
6
7
8
9
10
11
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)。

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

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

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

  • JavaScript 数组的进化与性能分析

    JavaScript 数组的进化与性能分析

    这篇文章主要介绍了JavaScript 数组的进化与性能分析,本文讲得更多的是内存、优化、语法差异、性能、近来的演进。需要的朋友可以参考下
    2017-09-09
  • javascript数组的扩展实现代码集合

    javascript数组的扩展实现代码集合

    非常不错的javascript数据功能增强函数
    2008-06-06
  • 浅谈javascript中遇到的字符串对象处理

    浅谈javascript中遇到的字符串对象处理

    下面小编就为大家带来一篇浅谈javascript中遇到的字符串对象处理。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 始终在屏幕中间显示Div的代码(css+js)

    始终在屏幕中间显示Div的代码(css+js)

    如何始终在屏幕中间显示Div需要的朋友可以参考下。
    2011-03-03
  • 使用javascript实现雪花飘落的效果

    使用javascript实现雪花飘落的效果

    本文主要介绍了使用javascript实现雪花飘落的特效,虽然网上有很多,不过都是比较陈旧了,兼容性不是太好,于是动手写一个,把思路和实现代码都分享给大家。
    2015-01-01
  • ajax java 实现自动完成功能

    ajax java 实现自动完成功能

    都知道百度建议是用ajax做的,想要做的快速稳定,可复制可移植就不容易了,花时间研究还不如自己来写。根据一个pdf文档提供的资料,用了小半天时间,终于实现了。在此与大家分享
    2012-12-12
  • 微信小程序下拉框组件使用方法详解

    微信小程序下拉框组件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • js中string和number类型互转换技巧(分享)

    js中string和number类型互转换技巧(分享)

    下面小编就为大家带来一篇js中string和number类型互转换技巧(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 检查JavaScript对象属性是否存在的方法小结

    检查JavaScript对象属性是否存在的方法小结

    在前端开发面试,面试官提出了一个经典的JavaScript问题:“在JavaScript中,如何检查对象是否包含某个属性?请你详细介绍几种不同的方法,并解释它们的区别,”这个问题考验你对JavaScript的基础掌握情况,让我们进入这个面试场景,需要的朋友可以参考下
    2024-09-09
  • JS中offset和匀速动画详解

    JS中offset和匀速动画详解

    这篇文章主要介绍了JavaScript动画:offset和匀速动画详解(含轮播图的实现),并把实现代码做了分享,有兴趣的朋友参考下。
    2018-02-02

最新评论