Question

我在设定的时间段后努力自动关闭Bootstrap模式。

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

setTimeout(function() { $('#myModal').modal('hide'); }, 4000);

两个基本问题：

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

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

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

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

（2）如何让模态显示第二次和第三次，并且正常的Timeout功能仍在工作？

（以下链接中提出的答案看起来很有希望，但对我来说并不起作用。也许他们不会在Bootstrap 3上工作？How to automatically close the bootstrap modal dialog after a minute）

以下代码看起来非常有前途，但即使在更改了“显示”之后也无法正常工作。 to＆＃39; shown.bs.modal＆＃39;。或者我可能将此代码放在错误的位置？

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

非常感谢任何建议！

Answer 1

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

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));
    });
});

与您的代码的主要区别：

我设置了超时时间（3000）
我在里面设置了myModal变量回调

Answer 2

我想这取决于你如何展示你的模态。但是你可以在事件监听器中设置超时吗？

这是一个JSFiddle来演示如何实现它。基本上，您在事件发生时将执行的函数中添加超时。

// 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);
});

如果您收听的事件是点击链接，则可能必须使用event.preventDefault()来阻止默认操作。您可以在here

上找到更多信息

我希望这会有所帮助。

如何在一段时间后自动关闭Bootstrap 3模态

2 个答案: