How to automatically close the bootstrap modal dialog after a minute

Question

I am using the bootstrap modal in one of my project. I\'m using the timer functions for automatically showing the bootstrap modal.

If the user doesn\'t close the bo

Answer 1

I am using this method (bootstrap 3.2.0 and higher):

Add 'modal-auto-clear' to the modals class for every modal you want to close automatically.

    ...

In jQuery:

$('.modal-auto-clear').on('shown.bs.modal', function () {
    $(this).delay(7000).fadeOut(200, function () {
        $(this).modal('hide');
    });
})

All modals with class 'modal-auto-clear' will now close 7 seconds after they opened (You can change this time in the jquery code of course).

If you want to create different autoclose times per modal you can do this:

Add the class 'modal-auto-clear' to the modals class and add attribute data-timer="3000" to the modals div:

    

        

            

                ×
                
Your title
            
            
Your body
            

                Close
            
        
    

In jQuery:

$('.modal-auto-clear').on('shown.bs.modal', function () {
    // if data-timer attribute is set use that, otherwise use default (7000)
    var timer = $(this).data('timer') ? $(this).data('timer') : 7000;
    $(this).delay(timer).fadeOut(200, function () {
        $(this).modal('hide');
    });
})