Bootstrap 4模态框在调用hide方法后未关闭

Question

Bootstrap 4模态框在调用hide方法后未关闭

jqueryajaxtwitter-bootstrapbootstrap-modalbootstrap-4

9

概述

在ajax调用期间，进度对话框会显示，然后在完成或失败时应该通过调用$("#progessDialog").modal("hide");来隐藏。似乎hide事件没有触发。我在ajax失败处理程序中定义了一个事件钩子来记录何时触发了隐藏事件，它从未记录，但另一个日志按预期打印出来：

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

复现步骤:

点击值之一(555或222)以触发内联编辑
更改该值
按Tab键退出

有趣的事情

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

注意:还未完成, 所以请勿指责用户界面，但是我乐意接受一些建设性的批评来改进UX/JS。现在没有任何验证，下一步将进行验证。

我看到其他几个类似但不完全相同的SO问题（这些问题似乎有一些模态框被隐藏但背景仍在显示——我的情况是整个模态框都隐藏了）。

这里有一个jsfiddle，可以重现这个问题: 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>

- Will Lopez

2

你的代码中第106行有 $("#progessDialog").modal("hidden");，应该改为 $("#progessDialog").modal("hide");。 - Tieson T.

1

你的 jsfiddle 应该能够工作吗？对我来说它没有弹出模态框。 - N-ate

@N-ate的小提琴已经修好了。 - Will Lopez

我需要花费很多时间来深入研究这个问题，因为我没有看到任何明显的东西。你可以尝试使用像Bootbox这样的工具（我目前似乎是主要维护者），或者类似的可以动态生成模态框的工具。如果你选择使用 Bootbox，你需要获取v5.x代码，因为当前版本的 Bootbox 与 Bootstrap 4 存在一些兼容性问题（详见此处）。如果你需要，我可以提供一个示例。 - Tieson T.

@TiesonT。谢谢，但我必须尽可能使用纯JS（以及jQuery，因为它已经在应用程序中），并且使用Bootstrap 4，而无需引入其他依赖项。 - Will Lopez

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dferenc · Accepted Answer

最后，解决方案非常简单。正如Bootstrap文档中.modal('show')所述，“在模态框实际显示之前（即在shown.bs.modal事件发生之前），调用返回给调用者”。在您的情况下，这意味着当您命令模态框打开时，它开始打开，但紧接着执行将继续进行其他代码。因此，在您的操作结束时，当您调用.modal('hide')方法时，模态框实际上还没有完全加载完成。为了解决这个问题，您可以观察shown.bs.modal事件，当模态框加载完成后再调用.modal('hide')。

另外，由于您想在各个位置关闭模态框，编写一个处理关闭模态框的函数可能很方便。类似下面的函数。

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

这里是您的fiddle，建议进行修改:https://jsfiddle.net/dferenc/5wehfss9/