Bootstrap 4模态隐藏不起作用

时间:2017-11-24 01:37:27

标签: twitter-bootstrap bootstrap-modal bootstrap-4

在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>

1 个答案:

答案 0 :(得分:3)

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

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