I am using bootstrap4 alpha 6 Modal, I am getting:

Error: Modal is transitioning

That happen when I am trying to re-trigger the same modal again with dynamic data through JavaScript function as following:

function openModal(title, text) {
    $('.modal-title').text(title);
    $('.modal-body p').text(text);
    $('#modalAlert').modal('show');
}

I tried to use setTimeout function, but didn't work as in this article:

Any suggestions?

I am using bootstrap4 alpha 6 Modal, I am getting:

Error: Modal is transitioning

That happen when I am trying to re-trigger the same modal again with dynamic data through JavaScript function as following:

function openModal(title, text) {
    $('.modal-title').text(title);
    $('.modal-body p').text(text);
    $('#modalAlert').modal('show');
}

I tried to use setTimeout function, but didn't work as in this article: https://github.com/twbs/bootstrap/issues/21687

Any suggestions?

• javascript
• jquery
• modal-dialog
• bootstrap-4

• It's a bug github.com/twbs/bootstrap/issues/22334 – Aline Matos Commented Jun 10, 2017 at 19:02

6 Answers 6

The quickest solution is to remove the modal 'fade' class which is throwing this error. It seems to be a known issue of the Bootsrap v6 that will be fixed in a next released.

See here

Worked with removing fade from parent div class.

Final Modal code ( Adding here for posterity ) :

HTML

<div class="modal loadingModal" id="applemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"  aria-hidden="true">
          <div class="modal-dialog" role="document">
              <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                    </div>
                    <div class="col-md-6">
                        <img src="ico/4.svg">
                    </div>
                </div>
              </div>
          </div>
    </div>

JS

$.ajax({
        type: "GET",
        url: "/getTimeline",
        data: {
            'dateTime': selected
        },
        async: true,
        beforeSend: function () {
              $('#applemodal').modal({
                  backdrop: 'static',
                  keyboard: false
              });
        },
        success: function(data) {
            $('#applemodal').modal('toggle');
       }
});

i am using bootstrap 4 Modal too, My solution;

    $(document).on('show.bs.modal', '.modal', function (event) {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    });

First open the modal and then try to find the DOM elements that's inside modal (eg. $('.modal-title') and $('.modal-body p'))

Changing the order of executing your function might work:

function openModal(title, text) {
  $('#modalAlert').modal('show'); 
  $('.modal-title').text(title);
  $('.modal-body p').text(text);
}

Finally, make sure that modal is open/visible in the screen when you access HTML that's inside the modal.

Please set your button type='submit' to type='button'

My solution was to open the model programmatically rather than through the link.

Instead of:

<A href="javascript: void(0);" data-toggle="modal" data-target="#myModal" title="Open My Modal">Open My Modal</A>

Use:

<A href="javascript: void(0);" ID="myLink" title="Open My Modal">Open My Modal</A>

$('#myLink').on('click', function(){ 
    $('#myModal').modal('show');
})