隐藏后，Bootstrap 4模态不再显示

Question

我有隐藏模态的功能：

function hideModal(){ 

    $('#mainModal').on('shown.bs.modal', function(e) {
        $("#mainModal").modal("hide");
    });
}  

当我第一次打开模态时，它工作正常。然后我调用hideModal（）隐藏它，这也有效。

我发现打开模态的任何后续调用：

$('#mainModal').modal();

...导致模态在很快消失之前被打开。

打开第二个模态后，我没有运行任何代码。

我已经检查了我的代码，以确保只加载了一个bootstrap实例。

为什么要拨打$（＆＃39;＃mainModal＆＃39;）。modal（）;第一次工作，但不是随后的工作？

感谢您的时间和帮助。

Answer 1

隐藏和显示模态都是异步事件，这意味着需要几毫秒才能完成。

所以，如果您在隐藏时调用modal()或modal('show')，则不会显示。相反，如果您在尚未显示的情况下致电modal('hide')，则不会隐藏。

Answer 2

谢谢你们。我需要保留那个听众，即不仅仅是：

$("#mainModal").modal("hide");

否则模态不会隐藏，因为（＆＃34;显示＆＃34;）调用仍在执行时（＆＃34;隐藏＆＃34;）被调用。

jQuery有一个.off监听器，它只会在一次触发后删除监听器。

所以我换了：

$('#mainModal').on('shown.bs.modal', function(e) {
        $("#mainModal").modal("hide");
});

使用：

$('#mainModal').one('shown.bs.modal', function(e) {
        $("#mainModal").modal("hide");
});

现在我得到了理想的结果。

Answer 3

通过调用hideModal函数隐藏模态的第一个（以及后续！）时间会发生什么，您设置一个事件处理程序，每次显示它时都会关闭模态。这应该有效，它只是在调用时隐藏模态：

function hideModal() { 
    $("#mainModal").modal("hide");
}