Come chiudere automaticamente Bootstrap 3 modale dopo il periodo di tempo

Question

sto lottando per chiudere automaticamente bootstrap modali, dopo un periodo di tempo stabilito.

Ecco il codice js che sto usando per chiudere il modal in 4 secondi: problemi

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

Due fondamentali:

(A) Quando la pagina html (che contiene le modali) carichi, il Timeout modale sembra essere eseguito prima che il modale venga visualizzato. Il modale è impostato per la visualizzazione dopo aver fatto clic su un collegamento nella pagina. Se il link non è scattato immediatamente al caricamento della pagina, verrà visualizzato il modal solo brevemente e quindi chiudere immediatamente perché essenzialmente il periodo di timeout è iniziato quando la pagina HTML caricata, non quando è stato visualizzato il modale.

(B) Se l'utente fa clic sul collegamento per avviare il modal una seconda volta (o 3 ° tempo, 4 ° tempo, etc.), i display modali correttamente, ma non si chiude dopo il periodo di tempo. Rimane appena aperto finché l'utente chiude manualmente.

Quindi ... le due domande sono:

(1) Come faccio ad avere il periodo di Timeout modale di attendere fino a visualizzare il modal prima di eseguire l'orologio.

(2) Come si ottiene la modale per visualizzare una seconda e una terza volta con la funzione Timeout corretta ancora funzionante?

(La risposta (s) proposto a questo link in basso sembrava promettente, ma non stanno lavorando per me. Forse non funzionano su Bootstrap 3? How to automatically close the bootstrap modal dialog after a minute)

Questo codice qui sotto sembrava molto promettente, ma non ha funzionato nemmeno dopo aver cambiato 'mostrato' a 'shown.bs.modal'. O forse sto mettendo questo codice nel posto sbagliato?

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

Molte grazie per qualsiasi suggerimento!

Answer 1

Credo che dipende da come si visualizza il tuo modale. Ma potresti impostare il timeout nell'ascoltatore dell'evento?

Ecco uno JSFiddle per dimostrare come è possibile raggiungerlo. Fondamentalmente si aggiunge il timeout nella funzione che verrà eseguita quando l'evento accade.

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

Se l'evento si ascolta è un click su un link si potrebbe avere per evitare che l'azione predefinita troppo utilizzando event.preventDefault(). Potete trovare maggiori informazioni su quello here

Spero che questo aiuti.

Answer 2

io non sono abbastanza sicuro circa il vostro html così ho fatto un esempio completo:

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 differenza principale con il codice:

1. Ho impostato un orario per il timeout (300 0)
2. ho impostato variabile myModal all'interno callback