javascript - How to delay display of Bootstrap 3 modal after click

Question

I'm trying to delay the display of a Bootstrap modal after the user has clicked on a 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 can see there is a show event that can be hooked to but am not sure how to introduce a 3 second delay before the modal appears on screen. Hoping someone can help?

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

Answer 1

You can delay the click of the trigger button, then activate the modal directly:

$('[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/