How to delay the display of Bootstrap 3 modal after a click

Question

I am trying to defer the display of the Bootstrap modality after the user clicked the trigger button:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Looking at the Bootstrap 3 documentation, I see that there is an event showthat you can connect to, but I'm not sure how to enter a 3 second delay before the modality appears on the screen. Hope someone can help?

Ref: http://getbootstrap.com/javascript/#modals

Answer 1

You can delay pressing the trigger button and then automatically activate the modal mode:

$('[data-toggle=modal]').on('click', function (e) {
    var $target = $($(this).data('target'));
    $target.data('triggered',true);
    setTimeout(function() {
        if ($target.data('triggered')) {
            $target.modal('show')
                .data('triggered',false); // prevents multiple clicks from reopening
        };
    }, 3000); // milliseconds
    return false;
});

http://jsfiddle.net/mblase75/H6UM4/

Answer 2

.on() :

var isFirstShowCall = false;

$('#myModal').on('show.bs.modal', function (e) {
    isFirstShowCall = !isFirstShowCall; // Prevents an endless recursive call
    if(isFirstShowCall) {
            e.preventDefault(); // Prevent immediate opening
            window.setTimeout(function(){
                $('#myModal').modal('show');
            }, 3000)
    }
});

http://jsfiddle.net/G9XeA/

Answer 3

window.setTimeout(function() {
   $('#myModal').modal('show');
}, 5000)

For demonstration, I used 5000 mini-seconds. You can use it according to your needs ...