Modal模态框3秒后自动关闭
背景：点击按钮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>
