Bootstrap Modal 在通過 Javascript 觸發時不會向正文添加模態開放類

Question

我的頁面上有一個 Modal，其內容會根據單擊兩個按鈕中的哪一個而發生變化（ <input />的值發生變化）。 為了更好地添加功能，我設置了一個額外的塊，如果有錯誤顯示，應該手動打開模態。

為了確保表單是“粘性的”，我手動觸發了相應按鈕上的click事件，其他什么不是。 但是，當我手動觸發click事件時，Bootstrap 沒有將.modal-open添加到正文中。 由於我的網站的構建方式，主體上沒有.modal-open ，Modal 完全隱藏在其他內容之后。

所以很明顯我做錯了什么，但我不知道。 這是我的代碼的副本：

<?php
$modalerror = false;
$id = 0;
if (/*Basic check for errors*/) {
    $modalerror = true;
    $id = /*Get the correct id*/;
}
?>
<script type="text/javascript">
    jQuery( document ).ready(function($) {
        $('#modal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);

            if (button.attr('data-name') && button.attr('data-name') != '') {
                $('#name').val(button.attr('data-name'));
            } else {
                $('#name').val('');
            }
        });
    });

    <?php if ($modalerror) { ?>
        jQuery ( window ).load(function() {
            jQuery('button[data-id=<?php echo $id; ?>]').trigger('click');
        });
    <?php } ?>
</script>

在進一步檢查/進展后，我注意到我以完全相同的方式在頁面上的其他地方手動觸發模態/稍后，將.modal-open類添加到.modal-open沒有任何問題。 代碼示例：

<script type="text/javascript">
    function manualOpen(id) {
        jQuery('button[data-id="'+id+'"]').trigger('click');
    }
</script>
<button type="button" onclick="manualOpen(/*Correct id*/);">Open</button>

甚至更多的測試，我向頁面添加了第二個模式，其中包含在非常特定的情況下自動打開的完全不同的內容，它不需要根據按鈕data-*屬性加載自定義內容。 如果第二個 Modal 也沒有某種形式的超時（如我對此問題的評論中所述），則它會遇到完全相同的問題。

Answer 1

使用引導程序 4，IMO 不使用超時的最佳方法是在模態的關閉事件中添加一個函數。

當一個模態正在關閉並且在完成關閉操作之前有一個打開另一個模態的命令時，新的模態是打開的，但類 .modal-open 不會添加到主體中。

下一個函數打開一個模態，檢查是否有一個打開的模態。 根據情況直接打開新的模態或在關閉事件回調中打開。 此功能要求每個模態都有一個 id。

function openModal(modalid) {
    //Looks for current modal open
    if ($('.modal.fade.show').length > 0) { 

        //Gets the id of the current opened modal
        var currentOpenModalId = $('.modal.fade.show').attr('id');

        //Attaches a function to the closing event
        $('#' + currentOpenModalId).on('hidden.bs.modal', function () {

            //Opens the new model when the closing completes
            $('#' + modalid).modal('show');

            //Unbinds the callback
            $('#' + currentOpenModalId).off('hidden.bs.modal');
        });

        //Hides the current modal
        $('#' + currentOpenModalId).modal('hide');
    } else {
        //If is not an opened modal, the new modal is opened directly
        $('#' + modalid).modal('show');
    }
}

Answer 2

我正在使用 Bootstrap 4.1.1 和 jQuery 3.3.1，並且遇到了同樣的問題。 50ms 沒有解決問題。 所以，我不得不把它提高到 500 毫秒，它奏效了！

//hide first
$('#modal1').modal('hide');
//add delay when showing next modal
setTimeout(function () {
  $('#modal2').modal('show');
}, 500);

Answer 3

我正在使用 bootstap 4.3.1 並修改了“bootstrap.min.js”文件

//bootstrap.min.js (line : 1646)
this._showBackdrop(function () {
    g(document.body).removeClass(ce); // ce = 'modal-open'
    t._resetAdjustments(),
    t._resetScrollbar(),
...

到

//bootstrap.min.js (line : 1646)
this._showBackdrop(function () {
    if (document.getElementsByClassName('modal fade show').length == 0) {
        g(document.body).removeClass(ce);
    }
    t._resetAdjustments(),
    t._resetScrollbar(),
...

它運作良好