webentwicklung-frage-antwort-db.com.de

Modal ist ein Fehler beim Bootstrap4-Alpha6-Modal

Ich benutze bootstrap4 alpha 6 Modal und bekomme:

Error: Modal is transitioning

Dies geschieht, wenn ich versuche, den gleichen Modal erneut mit dynamischen Daten über die JavaScript-Funktion auszulösen:

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

Ich habe versucht, die Funktion setTimeout zu verwenden, funktionierte jedoch nicht wie in diesem Artikel: https://github.com/twbs/bootstrap/issues/21687

Irgendwelche Vorschläge?

javascriptjquerymodal-dialogbootstrap-4
7
CairoCoder

Die schnellste Lösung ist, die modale 'Fade'-Klasse zu entfernen, die diesen Fehler auslöst. Es scheint ein bekanntes Problem des Bootsrap v6 zu sein, das in einem nächsten Release behoben wird. 

Siehe hier

6
Emilio Conte

Arbeitete mit dem Entfernen von fade aus der übergeordneten Div-Klasse. 

Endgültiger Modalcode ( Hinzufügen hier für die Nachwelt ): 

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

ich benutze auch Bootstrap 4 Modal, 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);
    });
0
Salih Gökan Birdal

Öffnen Sie zuerst das Modal und versuchen Sie dann, die DOM-Elemente zu finden, die sich in Modal befinden (zB $('.modal-title') und $('.modal-body p')).

Das Ändern der Reihenfolge der Ausführung Ihrer Funktion kann funktionieren:

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

Stellen Sie abschließend sicher, dass Modal auf dem Bildschirm geöffnet/sichtbar ist, wenn Sie auf HTML innerhalb des Modal zugreifen. 

0
Syed

Bitte setzen Sie Ihren Button type = 'submit' auf type = 'button'

0
oparam