Question

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

我正在做的是显示一个模式div，它有一个微调器。然后我去加载页面的其余部分，当所有完成加载页面的其余部分后，我关闭模态div。再次在v3中运行良好，不再适用于v4。然而，我可以打开控制台并运行$（“＃divLoading”）。modal（'hide'）;而div消失了。

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>

Answer 1

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

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

Bootstrap 4模态隐藏不起作用

1 个答案: