Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap modal close after 4 seconds or user click

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');
            }
        });
    });
});
like image 601
Alex Avatar asked Sep 10 '13 23:09

Alex


People also ask

How do you automatically close a modal?

Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal.

How do I stop bootstrap modal closing?

When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.

How do I stop my modal from closing when I click the button?

You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.


3 Answers

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

setTimeout(function() {$('#forgot-form').modal('hide');}, 4000);
like image 92
James Lawruk Avatar answered Oct 07 '22 00:10

James Lawruk


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

//where modal's id is 'Modal'

like image 43
ebentil Avatar answered Oct 07 '22 00:10

ebentil


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');
});
like image 1
Subhash Patel Avatar answered Oct 07 '22 01:10

Subhash Patel