How to automatically close Bootstrap 3 modal after a period of time

Question

I am trying to automatically close Bootstrap modality after a set period of time.

Here is the js code that I use to close the modality in 4 seconds:

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

Two main problems:

(A) When an html page (containing modal files) is loaded, the modal timeout seems to be executed before it is modally displayed. After clicking on the link on the page, the modal mod will be displayed. If the link is not clicked immediately when the page loads, the modal will be displayed only briefly , and then immediately close, because essentially the waiting period begins when the html page is loaded, and not when the modal form is displayed.

(B) If the user clicks on the link to launch the modal a second time (or 3rd, 4th time, etc.), the modal is displayed correctly, but DOES NOT close after a period of time. It just remains open until the user closes it manually.

So, two questions:

(1) How can I get a modal waiting period until the modal text appears before the clock starts.

(2) How do I get a modal display of the second and third time using the Timeout function, which still works?

(The answer suggested by this link below seems promising, but it doesn’t work for me. Maybe they don’t work on Bootstrap 3? How to automatically close bootstrap modal dialog in a minute )

This code below looked very promising, but didn’t work even after changing “shown” to “shown .bs.modal”. Or maybe I put this code in the wrong place?

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

Thanks so much for any suggestions!

Answer 1

I'm not very sure about your html, so I made a complete example:

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

The main difference from your code:

• I set the timeout time (3000)
• I set myModal variable inside callback

Answer 2

I think it depends on how you show your modal. But can you set a timeout in an event listener?

Here is a JSFiddle to demonstrate how you can achieve this. Basically you add a timeout to the function that will be executed when the event occurs.

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

If the event you are listening to is a click on a link, which you could also prevent by default using event.preventDefault() . You can find more information about this here.

Hope this helps.