Modal模态框3秒后自动关闭
2015-12-10 16:00
381 查看
背景:点击按钮A元素后,弹出模态框B元素。希望达到效果:Modal模态框3秒后自动关闭。如何实现:方法1:
<script> window.onload=prepareClose; function prepareClose(){ var btnSspecial=document.getElementById("btn-special"); //取得A元素的id btnSspecial.onclick=function(){ //点击A元素时执行该函数 var myModal=document.getElementById("myModal"); //取得B元素的id setTimeout(function(){ //在指定的毫秒数后调用该函数或计算表达式,这里为3秒 myModal.style.display='none'; //3秒后隐藏B元素 $(".modal-backdrop").remove(); //3秒后移除附在body体上的div(该div用于在弹出模态框时,给body体蒙上一层阴影) ;},3000); } } </script> 方法2:
<script> window.onload=prepareClose; function prepareClose(){ var btnSspecial=document.getElementById("btn-special"); btnSspecial.onclick=function(){ $('#myModal').modal('show'); setTimeout("$('#myModal').modal('hide')", 2000) } } </script> 方法3(纯CSS3实现):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .box{position:relative;overflow:hidden;} .cbox{position:absolute;width:100px;height:50px;opacity:0; } .btn{width:100px;height:50px;} .mymodal{ border:1px solid silver; width:300px; height:200px; display:none; animation:myaniation 3s; } input.cbox:checked ~ div.mymodal{display: block;} @keyframes myaniation{ 0%{opacity:0;} 10%{opacity:1;} 60%{opacity:1;} 100%{opacity:0;} } </style> </head> <body> <div class="box"> <input type="checkbox" class="cbox"/> <button class="btn">click</button> <div class="mymodal">mymodal</div> </div> </body> </html>
相关文章推荐
- Xcode 导入头文件自动补齐
- 12.10上课笔记
- 笔记20151210: 统一建模语言图(Unified Modeliing Language, UML)
- Cisco IP Communicator 企业Voip 解决方案
- 用PHP实现享元FlyWeight模式
- Pascal's Triangle
- PhotoShop—剪贴蒙版
- Gentoo下打开windows txt文件中文乱码问题
- Anroid ListView分组和悬浮Header实现
- nodejs获取当前url和url参数值
- Android 编译环境创建
- 创建分区表2:对已经存在的表进行分区
- seajs中spm压缩工具使用
- 解决“The type initializer for'Oracle.DataAccess.Client.OracleConnection' threw an exception ”异常
- 详解CSS设置默认字体样式
- solr java api
- Sublime相关配置
- Ubuntu 14.04 端口映射
- 如何查看linux 日志 磁盘使用情况?
- python使用tab补齐