私はエラーを取得しています：モーダル私はbootstrap4アルファ6モーダルを使用しています

Question

モーダルbootstrap4のalpha6に移行して、私が取得しています：

私がしようとしているときに起こる

Error: Modal is transitioning 

再トリガー同じモーダルを再びダイナミックに

function openModal(title, text) { 
    $('.modal-title').text(title); 
    $('.modal-body p').text(text); 
    $('#modalAlert').modal('show'); 
} 

私はsetTimeout関数を使用しようとしましたが、この記事のように動作しませんでした：JavaScript関数を介したデータには、以下のよう https://github.com/twbs/bootstrap/issues/21687

何か提案がありますか？

Answer 1

私はブートストラップ4を使用しています。

$(document).on('show.bs.modal', '.modal', function (event) { 
     var zIndex = 1040 + (10 * $('.modal:visible').length); 
     $(this).css('z-index', zIndex); 
     setTimeout(function() { 
      $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); 
     }, 0); 
    }); 

Answer 2

まずモーダル内のDOM要素を探してみてくださいその後、モーダルを開き、（例えば$('.modal-title')と$('.modal-body p')。）

働くかもしれないあなたの関数の実行順序を変更する：

function openModal(title, text) { 
    $('#modalAlert').modal('show'); 
    $('.modal-title').text(title); 
    $('.modal-body p').text(text); 
} 

を最後に、モーダル内にあるHTMLにアクセスするときに、モーダルが画面に表示されているかどうかを確認してください。

Answer 3

最も簡単な解決策は、このエラーを投げているモーダル 'フェード'クラスを削除することです。これは、Bootsrap v6の既知の問題で、次回リリースで修正される予定です。

here

Answer 4

を参照してくださいあなたのボタンタイプを= = 'ボタンの親のdivクラスからfadeを取り除くと協力

Answer 5

を入力して '送信' を設定してください。

最終モーダルコード（が後世のためにここに追加）：

HTML

<div class="modal loadingModal" id="applemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-body"> 
       <div class="row"> 
        <div class="col-md-6"> 
        </div> 
        <div class="col-md-6"> 
         <img src="ico/4.svg"> 
        </div> 
       </div> 
       </div> 
      </div> 
    </div> 

JS

$.ajax({ 
     type: "GET", 
     url: "/getTimeline", 
     data: { 
      'dateTime': selected 
     }, 
     async: true, 
     beforeSend: function() { 
       $('#applemodal').modal({ 
        backdrop: 'static', 
        keyboard: false 
       }); 
     }, 
     success: function(data) { 
      $('#applemodal').modal('toggle'); 
     } 
});