js实现类bootstrap模态框动画
作者:Stevenzhai 发布时间:2024-04-18 09:31:12
在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上,在这个项目下有多个js的常用插件,欢迎点赞。
猜你喜欢
- 在NumPy中,所有的标准三角函数如sin、cos、tan等均有对应的通用函数。一、利萨茹曲线(Lissajous curve)利萨茹曲线是
- 你是不是觉得每次新建项目都要写一次# coding:utf-8,感觉特烦人呐!懒(fu)人(li)教程来啦,先看效果图吧中文版如图进入设置然
- torch.randn()如何创建正态分布随机数torch.randn(*size)从均值为0,方差为1的正态分布中获取随机数【sample
- element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下对于我
- sql_mode="",即强制不设定MySql模式(如不作输入检测、错误提示、语法模式检查等)应该能提高性能,但有如下问
- 没有,用case when 来代替就行了. 例如,下面的语句显示中文年月 select getdate() as 日期,case month
- with 用法理解Overviewwith 与with之后的object一起,起到了抛出异常和单独生成一个空间让代码在空间里运行的效果。实验
- 测试环境win10python 3.5yield功能简介简单来说,yield 的作用就是把一个函数变成一个 generator,带有 yie
- Bulk 方式进行目标数据的Load,是Informatica提供的一种高性能的Load数据方式。它利用数据库底层机制,依靠调用数据库本身提
- 1.安装依赖包 pip install channels channels-redis2.settings.py 修改加上支持INSTALL
- DataLoader完整的参数表如下:class torch.utils.data.DataLoader( dataset, batch_s
- 昨天在做mergeCSS的时候遇到两个正则匹配的问题,也花了不少的时间,最后在CSS森林群的 CE 同学帮助下,才完成了这俩正则,特别记录下
- sql语句/*MySQL 消除重复行的一些方法---Chu Minfei---2010-08-12 22:49:44.660--引用转载请注
- 复制是将主数据库的DDL和DML操作通过二进制日志传到从库上,然后再从库重做,从而使得从库和主库保持数据的同步。MySQL可以从一台主库同时
- 本文实例讲述了Python实现连接两个无规则列表后删除重复元素并升序排序的方法。分享给大家供大家参考,具体如下:# -*- coding:u
- 本文实例为大家分享了python爬取淘宝商品的具体代码,供大家参考,具体内容如下import requests as req import
- 如图,以该猫咪图片为例(忽略水印)。将该文件命名为cat.jpg,并对其展开以下操作。使用PIL库进行灰度处理PIL库适合图像归档和图像批量
- 说明视频剪辑时需要为视频添加字幕,添加字幕方法之一:根据字幕文本文件批量生成透明底只有字幕内容的图片文件,如下图,然后将这些图片文件添加到视
- 画外接矩形框,可以画成一个最大的,也可以分别画。# -*- coding: utf-8 -*-import cv2image = cv2.i
- 前言在web测试中,不可避免的一个测试就是浏览器兼容性测试,在没有自动化测试前,我们总是苦逼的在一台或多台机器上安装N种浏览器,然后手工在