Modal transition error using bootstrap4 alpha6 modal

Question

I use bootstrap4 alpha 6 Modal, I get:

Error: Modal is transitioning

This happens when I try to run the same modal again with dynamic data through a JavaScript function, as shown below:

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

I tried using the setTimeout function, but did not work, as in this article: https://github.com/twbs/bootstrap/issues/21687

Any suggestions?

Answer 1

The quickest solution is to remove the 'fade' modal class that throws this error. This seems to be a known issue of Bootsrap v6, which will be fixed in a future release.

Look here

Answer 2

fade div-.

( ):

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

Answer 3

bootstrap 4 Modal , ;

    $(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);
    });

Answer 4

modal DOM (, $('.modal-title') $('.modal-body p'))

:

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

, , / HTML, .

Answer 5

= 'submit', = 'button'

Answer 6

, , .

:

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

:

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

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