twitter-bootstrap - Bootstrap 4模态隐藏不起作用

Question

在 Bootstrap v3.3.7 中，以下代码可以正常工作。我最近尝试升级到 Bootstrap v4.0.0-beta.2，由于某种原因它不再有效。

我正在做的是显示一个模态 div，上面有一个微调器。然后我去加载页面的其余部分，当所有完成加载页面的其余部分时，我关闭模态 div。在 v3 中再次正常工作，在 v4 中不再工作。但是，我可以打开控制台并运行 $("#divLoading").modal('hide');并且 div 消失了。

FIDDLE Boostsrap v4 [中断]:https://jsfiddle.net/gc1097oh/
FIDDLE Bootstrap v3 [工作]: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>

Answer 1

模态以异步方式创建，但您调用的是 showLoading()和 hideLoading()以同步方式运行。您可以检查模式是否已在 hideLoading 函数中显示，如下所示:

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