jquery - Bootstrap Modal not adding modal-open class to body when triggered via Javascript - Stack Overflow

admin管理员组

文章数量:1334133

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 pletely 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 pletely 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 ment to this 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 pletely 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 pletely 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 ment to this question).

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Oct 17, 2016 at 14:46 Chaosxmk asked Oct 13, 2016 at 14:32 ChaosxmkChaosxmk 7551515 silver badges2929 bronze badges 3

• 1 Ok, so I'm still trying to figure out what the problem is, but I found out that if I add a setTimeout on the opening of the modal and just delay it by 50ms, it seems to work fine. – Chaosxmk Commented Oct 14, 2016 at 15:49
• 1 Did you ever find the reason? I'm having exactly the same issue... tnx – Verthosa Commented Jun 19, 2017 at 9:04
• I'm also facing the same issue :( – Vivekraj K R Commented Jul 12, 2018 at 7:29

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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 mand for open another modal before it pletes 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 pletes
            $('#' + 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');
    }
}

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

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);

This problem also happens when you try to open a modal when another modal is still closing.

To avoid the problem, open the second modal only after the first has finished closing and has fired the hidden.bs.modal event.

$("#firstModal").modal("hide");
$("#firstModal").on('hidden.bs.modal', () => {$("#secondModal").modal();});

本文标签： jqueryBootstrap Modal not adding modalopen class to body when triggered via JavascriptStack Overflow