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'
})