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
<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的常用插件,欢迎点赞。
js实现类bootstrap模态框动画的更多相关文章
- Bootstrap入门(二十三)JS插件1:模态框
Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...
- js控制Bootstrap 模态框(Modal)插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
- 7-20 jquery遍历节点,bootstrap模态框绑定事件和解绑,mock.js,model.urlroot,id,打基础
7-19 1:$(event.target).parents().filter("tr").find("host-name") 为什么选择不到别的host-na ...
- 第二百四十三节,Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...
- Bootstrap 模态框(Modal)插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- bootstrap模态框垂直居中
很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...
- 关于手动关闭BootStrap模态框
在网上找手动关闭BootStrap模态框的解决方法,说是(需要引用bootstrap.js等): $("#myModal").modal('hide'); 但是我发现我的只能关闭 ...
- 前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
- Bootstrap模态框(MVC)
BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...
随机推荐
- 如何在CRM WebClient UI里使用HANA Live Report
1. 使用业务角色ANALYTICSPRO登录SAP CRM WebClient UI: 点击新建按钮创建一个新的HANA live report: 类型选择SHL: 弹出窗口,维护report的名称 ...
- CRUD全栈式编程架构之界面层的设计
Layout的设计 模板模式 mvc的模板特别类似设计模式中模板方法模式,结合Layout中RenderSection和RenderBody方法可以将部分html展现逻辑延迟到具体的视图页面去实现里面 ...
- NutDao配置多数据源
首先,我必须声明,这是一个非常简单的方法,很多小菜没做出来,是因为把nutz想得太复杂 数据源(或者是数据库连接池),在Nutz.Ioc看来,是一个普通的Bean,没任何特别之处. 再强调一点,除了$ ...
- Edmonds-Karp算法,最大流POJ(1459)
题目链接:http://poj.org/problem?id=1459 解题报告: 电力调度站不涉及流的产生和消耗,不用考虑,Edmonds-Karp算法,就是利用剩余网络和增广路来解决,网络中的最大 ...
- Android笔记(adb命令--reboot loader)
Android 的机器通过adb进入升级模式的方法 # adb shell # reboot loader 通过上面两个命令就进入升级模式了,通过工具升级就好了 为什么会写这简单的一篇呢?因为今天干了 ...
- C# is运算符
一.C# is运算符 is运算符用于检查对象是否与给定类型兼容(兼容表示对象是该类型,或者派生于该类型). is运算符用来检查对象(变量)是否属于某种数据类型,如int.string.bool.dou ...
- Python测量时间,用time.time还是time.clock
在计算机领域有多种时间.第一种称作CPU时间或执行时间,用于测量在执行一个程序时CPU所花费的时间.第二种称作挂钟时间,测量执行一个程序时的总时间.挂钟时间也被称作流逝时间或运行时间.与CPU时间相比 ...
- 顺序语句:GOTO和NULL语句
一 标号和GOTO 1 语法: PL/SQL中GOTO语句是无条件跳转到指定的标号去的意思.语法如下: GOTO label;......<<label>> /*标号是用< ...
- JavaScript_DOM学习篇_图片切换小案例
今天开始学习DOM操作,下面写一个小案例来巩固下知识点. DOM: document object model (文档对象模型) 根据id获取页面元素 : 如: var xx = document.g ...
- SHGetSpecialFolderLocation获取开始文件夹
SHGetSpecialFolderLocation函数可以获取windows 特殊目录 函数原型:(MSDN官方链接:https://msdn.microsoft.com/en-us/library ...