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

Question

Overview

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

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

重现步骤：

• 单击其中一个值（555或222）以触发内联编辑
• 改变价值
• 标签

Funny thing

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

注意：尚未完成，所以不要在用户界面上抹布，但是，我愿意接受一些建设性的批评来改进UX / JS。接下来是零验证。

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

这里有一个js小提琴再现问题：https://jsfiddle.net/willtx/8dpL5rLd/29/

Modal

  <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')的Bootstrap文档中所述，在实际显示模态之前（即在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/