CSS Bootstrap 关闭模式和 go 链接

Question

我有以下模态框的 div -

<div class="modal fade" id="Community" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <button type="button" onclick="window.location.href='#Pricing'" data-dismiss="modal">Close and go to pricing</button>
    </div>
</div>

单击按钮时，模式 window 关闭，但它不会 go 到#Pricing 指示的正确部分。

Answer 1

您在onclick中缺少' 。

<button type="button" onclick="window.location.href='#Pricing'" data-dismiss="modal">Close and go to pricing</button>

更新

我想我知道原因。 实际上，就您而言， onclick在data-dismiss="modal"之前被触发。 这意味着，位置变更甚至会在模态解雇之前发生。 但是，为了防止出现模态时页面滚动，主体将具有modal-open类。 这需要overflow: hidden; ，因此页面将无法滚动超过模态本身的高度。

要解决此问题，您需要将位置更改推迟到模态消失之后。 您可以将其移到hidden.bs.modal事件的回调中。

您可以在以下位置找到事件文档： http : //getbootstrap.com/javascript/#modals-usage 。

Answer 2

如果链接在同一页面中，请使用

jQuery(function($) {
    $('#myModal').on('hidden.bs.modal', function (e) {
        $('html, body').animate({
            scrollTop: $("#pricing").offset().top
        }, 2000);
    })
});

看到这个jsfiddle

Answer 3

以下是同时关闭对话框和 go 到文档片段的方法：

<a href="#foobar">
  <span data-bs-dismiss="modal">Close</span>
</a>

Answer 4

使用这个事件

$('#Community').on('hidden.bs.modal', function (e) {
    // do something...
    window.location.href='/#Pricing'
})