web-dev-qa-db-fra.com

Modal is transitioning error avec bootstrap4 alpha6 modal

J'utilise bootstrap4 alpha 6 modal, je reçois:

Error: Modal is transitioning

Cela se produit lorsque j'essaie de re-déclencher le même modal avec des données dynamiques via la fonction JavaScript comme suit:

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

J'ai essayé d'utiliser la fonction setTimeout, mais je n'ai pas fonctionné comme dans cet article: https://github.com/twbs/bootstrap/issues/21687

Aucune suggestion?

javascriptjquerymodal-dialogbootstrap-4
7
CairoCoder

La solution la plus rapide consiste à supprimer la classe modale 'fade' qui génère cette erreur. Il semble que ce soit un problème connu de Bootsrap v6 qui sera résolu dans une prochaine version. 

Voir ici

6
Emilio Conte

A travaillé avec la suppression de fade de la classe parent div. 

Code modal final ( Ajouter ici pour la postérité ): 

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

j'utilise aussi bootstrap 4 modal, ma 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

Commencez par ouvrir le modal, puis essayez de trouver les éléments DOM contenus dans le modal (par exemple, $('.modal-title') et $('.modal-body p')).

Changer l'ordre d'exécution de votre fonction peut fonctionner:

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

Enfin, assurez-vous que modal est ouvert/visible à l’écran lorsque vous accédez au HTML contenu dans le modal. 

0
Syed

Définissez votre type de bouton = 'submit' sur type = 'button'

0
oparam