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

You can use this as :

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

Answer 2

You can use setTimeout in conjuction with the shown callback.

$('#myModal').on('shown', function() {
    // remove previous timeouts if it's opened more than once.
    clearTimeout(myModalTimeout);

    // hide it after a minute
    myModalTimeout = setTimeout(function() {
        $('#myModal').modal('hide');
    }, 6e4);
});

Answer 3

Function definitions

function show_modal(){
    $('#myModal').modal('show');
}   

function hide_modal(){
    $('#myModal').modal('hide');
}   

Loading

$(window).load(function(){
    $('#myModal').modal('show');
    window.setTimeout(hide_modal, 60000);
});

Answer 4

Try

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

Answer 5

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.

<div class="modal fade modal-auto-clear" id="modal_confirmation" tabindex="-1" role="dialog">
    ...
</div>

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:

<div class="modal fade modal-auto-clear" data-timer="3000" id="modal_confirmation" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Your title</h4>
            </div>
            <div class="modal-body padded">Your body</div>
            <div class="modal-footer">
                <button type="button" id="close" data-dismiss="modal" aria-label="Close" class="btn btn-primary" style="display:none;">Close</button>
            </div>
        </div>
    </div>
</div>

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

Answer 6

Try this, $('#someselector').modal({show: false})