bootstrap modal close after 4 seconds or user click

Question

How would I set a timeout for a bootstrap modal? After getting the ajax data back that the message returned by php contains the term success, I want to give the user the option to close the window. However, I also just want to have a 4 second count down. Currently the second the success message comes back the modal hides itself.

$('#forgotform').submit(function (e) {
    "use strict";
    e.preventDefault();
    $('#forgotsubmit').button('loading');
    var post = $('#forgotform').serialize();
    var action = $('#forgotform').attr('action');
    $("#message").slideUp(350, function () {
        $('#message').hide();
        $.post(action, post, function (data) {
            $('#message').html(data);
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#usernamemail').focus();
            if (data.match('success') !== null) {
                $('#forgotform').slideUp('slow');
                $('#forgotsubmit').button('complete');
                $('#forgotsubmit').click(function (eb) {
                    eb.preventDefault();
                    $('#forgot-form').modal('hide');
                });
                setTimeout($('#forgot-form').modal('hide'), 10000);
            } else {
                $('#forgotsubmit').button('reset');
            }
        });
    });
});

Solution 1

When calling setTimeout(), wrap your command in an anonymous function. Otherwise the command will be executed immediately.

setTimeout(function() {$('#forgot-form').modal('hide');}, 4000);

Solution 2

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

//where modal's id is 'Modal'

Solution 3

The following code is used for hiding the model on an onClick event. Use the classname for the onClick listener and the modal id as the selector to hide.

$('.class_name').on('click',function(){
    $('#modal_id').modal('hide');
});

Comments

[JofryHS]

What happens when you comment out the setTimeout? Does it automatically closes itself?

[Maciej Jureczko]

Your answer does not bring anything new to the problem, which was solved 4 years ago.

[Eyk Rehbein]

Hi there. I think this wasn't quite the correct answer for what was asked

[Subhash Patel]

Hi @eykhagen Alex also want user click and hide modal.

[ebentil]

You left out the time

[Subhash Patel]

@ebentil You read my note above it's only for onclick event.

[ORHAN ERDAY]

This actually a wrong answer but %100 I need this.