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

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问题本质上相似但不是真的相同(这些问题似乎隐藏了一些模态而不是背景 - 我的情况是完整的模态).

这里有一个js小提琴再现问题: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/