Question

概述

在ajax调用期间显示进度模式，然后在完成或失败时，应通过调用$("#progessDialog").modal("hide");隐藏它。 hide事件似乎没有被触发。我在ajax失败处理程序中有一个事件挂钩，用于记录何时触发hide事件并且它永远不会记录，但是另一个日志按照预期的那样打印出来：

   $('#progessDialog').on('hidden.bs.modal', function (e) {
       console.log('calling modal hide');
   });

重现的步骤：

点击其中一个值（555或222）以触发内联编辑
更改值
标签

有趣的事

模态拒绝隐藏并且js调用完成后，当我在开发控制台中输入$("#progessDialog").modal("hide")时，模态会按预期隐藏。

注意：尚未完成，因此暂时不在用户界面上，但是，我对一些建设性的批评是开放的，以改进UX / JS。接下来会有零验证。

我已经看过其他几个SO问题，这些问题在本质上是相似的但不是真的相同（这些问题似乎隐藏了一些模态而不是背景 - 我的情况是完整的模态）。

这里是一个重现问题的小提琴手：https://jsfiddle.net/willtx/8dpL5rLd/29/

模态

  <div class="modal fade" id="progessDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="progessDialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="modal-title" id="progessDialoglLabel">Processing...</h5>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

最后，解决方案非常简单正如引导文档中关于.modal('show')，所述，在实际显示模态之前（即在shown.bs.modal事件发生之前），调用将返回给调用者。

在您的情况下，这意味着，当您将订单交给模式打开时，启动以打开，但在此之后，执行将继续执行其他代码。因此，在操作结束时，当您调用.modal('hide')方法时，模态实际上没有完成加载。为了解决这个问题，您可以在模式加载完成后观察shown.bs.modal事件，然后调用.modal('hide')。

另外，由于你想在不同的地方关闭模态，可以方便地编写一个处理模态关闭的函数。像下面那样的东西。

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

以下是建议修改的小提琴：https://jsfiddle.net/dferenc/5wehfss9/

bootstrap 4模态在调用hide后没有关闭

概述

有趣的事

模态

1 个答案: