Bootstrap Modal 在通过 Javascript 触发时不会向正文添加模态开放类

Question

I have a Modal on my page whose content changes depending on which of two buttons is clicked (an <input /> 's value changes). To better add functionality, I have set up an additional block of that is supposed to manual open the Modal if there's an error to show.

To make sure the form is "sticky", I manually trigger the click event on the corresponding button and what not. However, when I manually trigger the click event, Bootstrap is not adding .modal-open to the body. Due to how my site is built, without .modal-open on the body, the Modal is completely hidden behind other content.

So obviously I'm doing something wrong, but I have no idea. Here's a copy of my code:

<?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>

Upon further inspection/progress, I noticed that it I manually trigger the Modal in the exact same fashion somewhere else on the page/later on, there aren't any problems with adding the .modal-open class to the body. Code sample:

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

Even more testing, I added a second modal to the page with completely different contents that opens automatically under very specific circumstances, it does not need to load custom content based off of a buttons data-* attributes. This second Modal suffers the exact same problem if it doesn't also have some form of timeout (as mentioned in my comment to this question).

Answer 1

Using bootstrap 4, the best way IMO without using timeouts is adding a function in the closing event of the modal.

When a modal is closing and there is a command for open another modal before it completes the closing action, the new modal is open but the class .modal-open is not added to the body.

The next function open a modal checking if there is an opened modal. The new modal is opened directly or in the closing event callback depending of the case. This function requires that every modal has an 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

I am using Bootstrap 4.1.1 and jQuery 3.3.1, and faced the same problem. 50ms didn't solved the problem. So, i had to bump it upto 500ms, and it worked!

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

Answer 3

I'm using bootstap 4.3.1 and modified 'bootstrap.min.js' file

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

to

//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(),
...

It works very well