Bootstrap 4模态框自动关闭后仅一次新标签页重定向问题

原代码的核心问题是用了setInterval——这个方法会每隔指定时间重复执行代码块，所以会不断触发模态框关闭（还写错了模态框ID，应该是#myModal1而非#myModal）和新标签页跳转，导致重复操作。另外还存在重复关闭模态框的冗余逻辑。

修正方案 #

• 用setTimeout替代setInterval，它只会执行一次代码块
• 整合关闭模态框和跳转的逻辑，避免重复操作
• 确保模态框ID完全匹配

修正后的完整代码 #

<div class="modal fade" id="myModal1">
  <div class="modal-dialog">
    <div class="modal-content">
       <button type="button" class="close" data-dismiss="modal">&times;</button>
       <div class="model-box">
         <div class="row">
             <img src="img/mod/pop-header.svg" alt="" class="model-img1">
         </div>          
         <a href="#" class="model-btn" target="_blank">Get Your 100% Bounus</a>
       </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
  // 页面加载时打开模态框
  $("#myModal1").modal('show');

  // 3秒后执行一次：关闭模态框 + 打开新标签页跳转
  setTimeout(function(){
    $('#myModal1').modal('hide');
    window.open('http://127.0.0.1:30008/','_blank');
  }, 3000);
})
</script>

额外优化（可选） #

如果想确保跳转只在模态框完全关闭后触发，同时避免用户手动关闭时重复跳转，可以监听Bootstrap的hidden.bs.modal事件，搭配标记位控制：

<div class="modal fade" id="myModal1">
  <!-- 模态框内容保持不变 -->
</div>
<script type="text/javascript">
$(document).ready(function(){
  let hasRedirected = false; // 标记是否已完成跳转

  $("#myModal1").modal('show');

  // 3秒后自动关闭模态框
  setTimeout(function(){
    $('#myModal1').modal('hide');
  }, 3000);

  // 监听模态框关闭完成事件
  $('#myModal1').on('hidden.bs.modal', function () {
    if(!hasRedirected){
      window.open('http://127.0.0.1:30008/','_blank');
      hasRedirected = true; // 标记为已跳转，防止重复触发
    }
  });
})
</script>

内容的提问来源于stack exchange，提问作者sobuzislamvai123 vai