web-dev-qa-db-fra.com

Comment fermer automatiquement Bootstrap 3 modal après une période de temps

J'ai du mal à fermer automatiquement les modaux Bootstrap après une période de temps définie.

Voici le code js que j'utilise pour fermer le modal en 4 secondes:

setTimeout(function() { $('#myModal').modal('hide'); }, 4000);

Deux problèmes fondamentaux:

(A) Lorsque la page html (qui contient les modaux) se charge, le délai d'attente modal semble s'exécuter avant même que le modal ne soit affiché. Le modal est configuré pour s'afficher après avoir cliqué sur un lien dans la page. Si le lien n'est pas cliqué immédiatement au chargement de la page, le modal n'apparaîtra que brièvement , puis fermez immédiatement, car essentiellement la période de temporisation a commencé lorsque la page html a été chargée, et non lorsque le modal a été affiché.

(B) Si l'utilisateur clique sur le lien pour lancer le modal une deuxième fois (ou 3e fois, 4e fois, etc.), le modal s'affiche correctement mais ne se ferme PAS après la période de temps . Il reste ouvert jusqu'à ce que l'utilisateur le ferme manuellement.

Alors ... les deux questions sont:

(1) Comment puis-je faire en sorte que le délai d'expiration du modal soit affiché jusqu'à ce que le modal s'affiche avant d'exécuter l'horloge.

(2) Comment puis-je faire en sorte que le modal s'affiche une deuxième et une troisième fois avec la fonction Timeout appropriée qui fonctionne toujours?

(Les réponses proposées sur ce lien ci-dessous semblaient prometteuses, mais ne fonctionnent pas pour moi. Peut-être qu'elles ne fonctionnent pas sur Bootstrap 3? Comment fermer automatiquement le bootstrap dialogue modal après une minute )

Ce code ci-dessous semblait très prometteur, mais n'a pas fonctionné même après avoir changé "montré" en "montré.bs.modal". Ou peut-être que je place ce code au mauvais endroit?

var myModal = $('#myModal').on('shown', function () {
    clearTimeout(myModal.data('hideInteval'))
    var id = setTimeout(function(){
        myModal.modal('hide');
    });
    myModal.data('hideInteval', id);
})

Merci beaucoup pour toutes suggestions!

javascripttwitter-bootstrapbootstrap-modal
7
b-kat

Je ne suis pas sûr de votre html donc j'ai fait un exemple complet:

html:

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Open Modal</a>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4>Header</h4>
            </div>
            <div class="modal-body">
                Modal Content
            </div>
        </div> 
    </div>
</div>

js:

$(function(){
    $('#myModal').on('show.bs.modal', function(){
        var myModal = $(this);
        clearTimeout(myModal.data('hideInterval'));
        myModal.data('hideInterval', setTimeout(function(){
            myModal.modal('hide');
        }, 3000));
    });
});

La principale différence avec votre code:

  1. J'ai défini un délai d'expiration (3000)
  2. Je mets la variable myModal dans le rappel
14
Aguardientico

Je suppose que cela dépend de la façon dont vous affichez votre modal. Mais vous pouvez définir le délai d'expiration dans l'écouteur d'événement?

Voici un JSFiddle pour montrer comment vous pouvez y parvenir. Fondamentalement, vous ajoutez le délai d'expiration dans la fonction qui sera exécutée lorsque l'événement se produira.

// Select the element you want to click and add a click event
$("#your-link").click(function(){
    // This function will be executed when you click the element
    // show the element you want to show
    $("#the-modal").show();

    // Set a timeout to hide the element again
    setTimeout(function(){
        $("#the-modal").hide();
    }, 3000);
});

Si l'événement que vous écoutez est un clic sur un lien, vous pourriez également avoir à empêcher l'action par défaut en utilisant event.preventDefault(). Vous pouvez trouver plus d'informations à ce sujet ici

J'espère que ça aide.

10
Mathieu David