ブートストラップ4モーダル非表示で動作しない

Question

ブートストラップv3.3.7では以下のコードが正常に動作します。私は最近Bootstrap v4.0.0-beta.2にアップグレードしようとしましたが、何らかの理由でそれが動作しなくなりました。

私がやっていることは、モーダルdivをスピナーとして表示していることです。私はその後、ページの残りの部分をロードし、すべてのページの残りの部分をロード完了したら私はモーダルdivを閉じます。再びv3で正常に動作し、v4では動作しなくなりました。私はしかし、コンソールを開き、$（ "＃divLoading"）を実行することができます。ディビジョンは消えます。

フィドルBoostsrap V4が[はBROKE]を：https://jsfiddle.net/gc1097oh/
FIDDLEブートストラップ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'); 
    }) 
}