如何在一段时间后自动关闭Bootstrap 3模态 [英] How to automatically close Bootstrap 3 modal after time period

问题描述

我很难在设定的时间段后自动关闭Bootstrap模态。

I'm struggling to automatically close Bootstrap modals after a set time period.

这是我用来在4秒内关闭模态的js代码：

Here's the js code I'm using to close the modal in 4 seconds:

setTimeout（function（）{$（'＃myModal'）。modal（'hide'）;}，4000）;

两个基本问题：

（A）当html页面（包含模态）时加载，模态超时似乎在模态甚至显示之前运行。单击页面中的链接后，将设置模式。如果在页面加载时未单击立即链接，则模式将仅短暂显示然后立即关闭，因为基本上超时时段是在加载html页面时启动的，而不是显示模态。

(A) When the html page (that contains the modals) loads, the modal Timeout seems to run before the modal is even displayed. The modal is set to display after clicking on a link in the page. If the link is not clicked immediately when the page loads, the modal will only appear briefly and then close immediately because essentially the Timeout period started when the html page loaded, not when the modal was displayed.

（B）如果用户点击链接以再次启动模态（或第3次，第4次等），模态显示正确但在该时间段后不会关闭。它会一直保持打开状态，直到用户手动关闭它。

(B) If the user clicks on the link to launch the modal a second time (or 3rd time, 4th time, etc.), the modal displays properly but does NOT close after the time period. It just stays open until the user manually closes it.

所以......两个问题是：

So...the two questions are:

（1）如何让模态超时周期等到运行时钟之前显示模态。

(1) How do I get the modal Timeout period to wait until the modal is displayed before running the clock.

（2）如何让模态显示第二次和第三次正确的超时功能仍然有效？

(2) How do I get the modal to display a second and third time with the proper Timeout function still working?

（答案（ s）在下面这个链接提出看起来很有希望，但不适合我。也许他们不能在Bootstrap 3上工作？如何在一分钟后自动关闭bootstrap模式对话框）

(The answer(s) proposed at this link below looked promising, but aren't working for me. Maybe they don't work on Bootstrap 3? How to automatically close the bootstrap modal dialog after a minute )

下面的代码看起来非常有前途，但即使将'shown'更改为'shown.bs.modal'后也无效。或者我可能将此代码放在错误的位置？

This code below looked very promising, but didn't work even after changing 'shown' to 'shown.bs.modal'. Or maybe I'm placing this code in the wrong place?

var myModal = $('#myModal').on('shown', function () {
    clearTimeout(myModal.data('hideInteval'))
    var id = setTimeout(function(){
        myModal.modal('hide');
    });
    myModal.data('hideInteval', id);
})

非常感谢任何建议！

推荐答案

我不太确定你的HTML，所以我做了一个完整示例：

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. 我设置超时时间（3000）


2. 我在my b $ b回调中设置myModal变量

这篇关于如何在一段时间后自动关闭Bootstrap 3模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！