Bootstrap 4模态框隐藏未生效

Question

在Bootstrap v3.3.7中，下面的代码能够正常工作。最近我尝试升级到Bootstrap v4.0.0-beta.2，但出现了问题。我正在做的是显示一个带有旋转图标的模态框，然后加载页面的其余部分，当所有页面都加载完毕后，关闭模态框。在v3中可以正常工作，在v4中不再起作用。但是我可以打开控制台并运行$("#divLoading").modal('hide');，这样模态框就会消失。

FIDDLE Boostsrap v4 [BROKE]: https://jsfiddle.net/gc1097oh/ FIDDLE Bootstrap v3 [WORKS]: https://jsfiddle.net/7skoLo2q/

 <div id="divMain" class="Main">
                <div id="divLoading" class="modal fade">
                    <div class="loader">
                        <br />
                        <br />
                        loading div actual div has a spinner but not need to show error
                    </div>
                    <div class="modal-dialog invisible">

                    </div>
                </div>
             </div>

JavaScript：

<script type="text/javascript">
    $(function () {
        showLoading();
        //do some work then hide
        hideLoading();
    });


    function showLoading() {
        $('#divLoading').modal({
            backdrop: 'static',
            keyboard: false
        });
    }

    function hideLoading() {
        $("#divLoading").modal('hide');
    }
</script>

- user3693281

---

我认为这与异步方法有关。当模态框处于过渡状态时，您无法触发隐藏方法。 - Klooven

Answer 1

模态框是以异步方式创建的，但您正在同步调用 showLoading()和 hideLoading()函数。您可以在 hideLoading()函数中这样检查模态框是否已经显示：

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

- dferenc

---

所以听起来好像在模态框完全显示之前就调用了hideLoading()？提供的解决方案只有在模态框显示之前所有页面加载函数都完成的情况下才有效。是否有一种解决方案可以处理这两种情况？ - user3693281

回答我上面的问题，hideLoading()函数可以像下面这样实现。但是有更好的方法吗？<br> function hideLoading() { $('#divLoading').on('shown.bs.modal', function (e) { $("#divLoading").modal('hide'); }) $("#divLoading").modal('hide'); } - user3693281

由于JavaScript中调用堆栈的工作方式，hideLoading将始终在异步创建模态框之前被调用。因此，在模态框显示之前，回调函数将始终添加到“shown.bs.modal”事件中。 - dferenc