How to automatically close Bootstrap 3 modal after time period [duplicate]

Answer 1

I guess it depends on how you display your modal. But you could set the timeout in the event listener?

Here is a JSFiddle to demonstrate how you can achieve it. Basically you add the timeout in the function that will be executed when the event happens.

// Select the element you want to click and add a click event
$("#your-link").click(function(){
    // This function will be executed when you click the element
    // show the element you want to show
    $("#the-modal").show();

    // Set a timeout to hide the element again
    setTimeout(function(){
        $("#the-modal").hide();
    }, 3000);
});

If the event you listen for is a click on a link you could have to prevent the default action too by using event.preventDefault(). You can find more info on that here

I hope this helps.

Answer 2

I'm not pretty sure about your html so I did a complete example:

html:

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Open Modal</a>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4>Header</h4>
            </div>
            <div class="modal-body">
                Modal Content
            </div>
        </div> 
    </div>
</div>

js:

$(function(){
    $('#myModal').on('show.bs.modal', function(){
        var myModal = $(this);
        clearTimeout(myModal.data('hideInterval'));
        myModal.data('hideInterval', setTimeout(function(){
            myModal.modal('hide');
        }, 3000));
    });
});

The main difference with your code:

1. I set a time for timeout (3000)
2. I set myModal variable inside callback