web-dev-qa-db-ja.com

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>
twitter-bootstrapbootstrap-modalbootstrap-4
4
user3693281

モーダルは非同期で作成されますが、showLoading()関数とhideLoading()関数を同期的に呼び出しています。次のように、モーダルがhideLoading関数にすでに表示されているかどうかを確認できます。

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