Modal模态框3秒后自动关闭

最新推荐文章于 2024-07-03 21:18:58 发布

转载最新推荐文章于 2024-07-03 21:18:58 发布 · 833 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ishuanghe/p/5036351.html

本文介绍了三种实现模态框在三秒后自动关闭的方法。包括使用JavaScript配合HTML及CSS3动画来实现这一功能的具体步骤与代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：点击按钮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>

转载于:https://www.cnblogs.com/ishuanghe/p/5036351.html