【问题标题】:How to redirect when clicking outside bootstrap modal-content?单击外部引导模式内容时如何重定向?
【发布时间】:2026-02-13 16:50:02
【问题描述】:

我的网页中有一个模式,我已经在其中创建了它,因此当单击关闭按钮时,它会重定向到主页。但是我还需要在引导模式之外单击时重定向到主页,即".modal-content" 类。 我试着这样做

$('#enterCodeModal').on('hidden.bs.modal', function (e) {
    window.location.replace='index.html';
});

通过查看与此类似的其他帖子,但它不起作用。如果有人能帮我解决这个问题,那将是一个很大的帮助。

【问题讨论】:

  • 试试 window.location.href = '...';
  • 是的,我也试过了
  • 您的事件是触发还是只是重定向不起作用?
  • window.location.href = ''; 应该可以工作
  • 有什么错误吗?你确定模态的 id 是enterCodeModal

标签: javascript jquery twitter-bootstrap bootstrap-4


【解决方案1】:

它适用于window.location.href,您可以在此处看到:

$(document).ready(function(e) {
  $('#myModal').on('hidden.bs.modal', function(e) {
    window.location.href = 'https://google.com'
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

【讨论】:

  • 看来问题出在 data-backdrop="static" 感谢您的回答