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 bootstrap modal for a minute. Then its automatically needs to close the bootstrap modal.

How to set the timer for closing the bootstrap modal automatically?

Please kindly help me to solve this issue.

Thanks in Advance :)

    var mins;
            var secs;
            function cd() {
                mins = 1 * m("");
                secs = 0 + s(":"); // change seconds here (always add an additional second to your total)
                console.log(mins);
                console.log(secs);
                redo();
            }
            function m(obj) {
                for(var i = 0; i ";
                if(mins :";
                disp += "";
                if(secs ";
                return(disp);
            }
            function redo() {
                secs--;
                if(secs == -1) {
                    secs = 59;
                    mins--;
                }
                $('#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');
                    }, 5000);
                });
                document.getElementById('timer_container').innerHTML = dis(mins,secs); 
                if((mins == 1) && (secs == 45)) {
                    $("#myModal").modal('show');
                    $('#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');
                        }, 5000);
                    });
                    $('.timer-inc').click(function(){
                        $("#myModal").modal('hide');
                        href="includes/setSessionTime.php";
                        $.ajax({ 
                            type: "POST",
                            //data : {cat:"hai"},
                            cache: false,
                            url: href,   
                            success: function(data){
                                console.log(data);
                               $("#results").html(data);              
                            } 
                        });
                    });

                    $('.timer-close').click(function(){
                        $("#myModal").modal('hide');
                        href="includes/clearcart.php";
                        $.ajax({ 
                            type: "POST",
                            //data : {cat:"hai"},
                            cache: false,
                            url: href,   
                            success: function(data){
                                console.log(data);
                               $("#results").html(data);              
                            } 
                        });
                    });

                    $('#myModal').on('hidden', function () {
                        href="includes/clearcart.php";
                        $.ajax({ 
                            type: "POST",
                            //data : {cat:"hai"},
                            cache: false,
                            url: href,   
                            success: function(data){
                                console.log(data);
                               $("#results").html(data);              
                            } 
                        });    
                    });
                }
                else if((mins == 0) && (secs == 00)){
                    $("#myModal").modal('hide');
                    href="includes/clearcart.php";
                        $.ajax({ 
                            type: "POST",
                            //data : {cat:"hai"},
                            cache: false,
                            url: href,   
                            success: function(data){
                                console.log(data);
                               $("#results").html(data);              
                            } 
                        });
                }
                else {
                    cd = setTimeout("redo()",1000);
                }
            }
            function init() {
                cd();
            }

Answer 1

Try

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

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

You can use this as :

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

Answer 4

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 5

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 6

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