如何延迟引导3模式的显示后点击

I'm trying to delay the display of a Bootstrap modal after the user has clicked on a trigger button:

在用户点击了一个触发按钮后，我正在试图延迟一个Bootstrap模式的显示:

<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?

查看Bootstrap 3文档，我可以看到有一个show事件可以连接到，但不知道如何在模式出现在屏幕上之前引入3秒的延迟。希望有人可以帮忙吗?

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

裁判:http://getbootstrap.com/javascript/ #情态动词

3 个解决方案

#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/

#2

Use .on() to hook into the event:

使用.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/

#3

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

For demo I used 5000 mini seconds. You can used it as per your need...

demo中我用了5000秒。你可以根据你的需要使用它……

#1