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

can you show your codes, especially *timer functions for automatically showing the bootstrap modal* ? — Raptor, Jun 14 '13 at 06:11

score 14 · Accepted Answer · answered Jun 14 '13 at 06:16

14

Try

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

answered Jun 14 '13 at 06:16

Arun P Johny

384,651
66
527
531

1

Where I've to pass the timings? – Jun 14 '13 at 06:50
1

Seems in bootstrap 3.2.0 'shown' event is changed to 'show.bs.modal'. – K. Siva Prasad Reddy Jul 17 '14 at 04:59
@sivaprasadreddy.k It's `shown.bs.modal` actually. `show.bs.modal` also exists, but is different. – cvrebert Mar 04 '15 at 06:37

score 7 · Answer 2 · answered Jun 14 '13 at 06:13

7

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

answered Jun 14 '13 at 06:13

Austin Brunkhorst

20,704
6
47
61

Hi, Thank you for your reply. I've tried this but its not working. – Jun 14 '13 at 06:24
What is the ID of your modal? – Austin Brunkhorst Jun 14 '13 at 06:28
same myModal only. I've posted the code above. What I've tried now. – Jun 14 '13 at 06:31
No. I didn't get any error. I've tried for 5000 for checking it. But didn't work. – Jun 14 '13 at 06:38
Actually its the timer function, Timer starts from 2mins, when it reaches 1:45 then it the bootstrap modal dialog opens. If the user doesn't click or close the boostrap modal then its automatically needs to get close after 60secs.. This is what I try to do. – Jun 14 '13 at 06:40
@AustinBrunkhorst I've posted my complete code. Can you guys please help me.? – Jun 14 '13 at 06:47

score 4 · Answer 3 · answered Apr 18 '16 at 10:18

4

You can use this as :

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

answered Apr 18 '16 at 10:18

Kabir Hossain

2,865
1
28
34

klaaz · Answer 4 · 2016-11-29T09:44:49.963

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

score 2 · Answer 5 · edited Oct 16 '13 at 04:01

2

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

edited Oct 16 '13 at 04:01

Pankrates

3,074
1
22
28

answered Oct 16 '13 at 03:39

Fernando Ingunza

21
1

score 0 · Answer 6 · answered Jun 14 '13 at 06:13

0

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

answered Jun 14 '13 at 06:13

user1390282

11
1

does not include 1-minute countdown. – Raptor Jun 14 '13 at 06:33

How to automatically close the bootstrap modal dialog after a minute

6 Answers6

Linked

Related