Jak automatycznie zamykać mod Bootstrap 3 po okresie czasu

Question

Mam problem z automatycznym zamknięciem modów Bootstrap po określonym czasie.

Oto kod js Używam aby zamknąć modalne w 4 sekundy:

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

dwa podstawowe problemy:

(A) Gdy strona html (który zawiera czasowniki modalne) ładuje, modalny Timeout wydaje się działać, zanim modal zostanie wyświetlony. Modal jest ustawiony do wyświetlania po kliknięciu łącza na stronie. Jeśli po kliknięciu linku nie klikniesz natychmiast, modalny pojawi się krótko tylko na, a następnie natychmiast się zamknie, ponieważ w zasadzie okres limitu czasu został uruchomiony po załadowaniu strony HTML, a nie po wyświetleniu modalu.

(B) Jeśli użytkownik kliknie link, aby uruchomić modal po raz drugi (lub trzeci raz, 4 raz itd.), Modalnie wyświetla się prawidłowo, ale NIE zamyka się po upływie określonego czasu. Po prostu pozostaje otwarty, dopóki użytkownik nie zamknie go ręcznie.

... więc dwa pytania:

(1) Jak mogę dostać modalna limit czasu, aby czekać aż modalna jest wyświetlany przed uruchomieniem zegara.

(2) Jak sprawić, by modal wyświetlający drugi i trzeci raz z właściwą funkcją Timeout nadal działał?

(Odpowiedź (s) zaproponował na ten link poniżej wyglądał obiecująco, ale nie pracuje dla mnie. Może nie działać na Bootstrap 3? How to automatically close the bootstrap modal dialog after a minute)

Ten kod poniżej wyglądały bardzo obiecująco, ale nie działało nawet po zmianie "pokazanego" na "pokazany.bs.modal". A może umieszczam ten kod w niewłaściwym miejscu?

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

Wielkie dzięki za wszelkie sugestie!

Answer 1

Myślę, że to zależy od sposobu wyświetlania modalu. Ale możesz ustawić limit czasu w detektorze zdarzeń?

Oto JSFiddle, aby pokazać, w jaki sposób można to osiągnąć. Zasadniczo dodajesz limit czasu w funkcji, która zostanie wykonana po wystąpieniu zdarzenia.

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

Jeżeli zdarzenie można słuchać za to kliknięcie na link można mieć, aby zapobiec zbyt domyślną akcję przy użyciu event.preventDefault(). Możesz znaleźć więcej informacji na ten temat: here

Mam nadzieję, że to pomoże.

Answer 2

nie jestem całkiem pewien swojej html tak zrobiłem kompletny przykład:

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

Główną różnicą w kodzie:

1. Ustawiłem limit czasu (300 0)
2. ustawić zmienną myModal wewnątrz zwrotnego