나는 오류가 점점 오전 : 모달 내가 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 기능을 사용하려고했으나이 문서대로 작동하지 않았다 : 자바 스크립트 함수를 통해 데이터는 다음과 같은 https://github.com/twbs/bootstrap/issues/21687

제안 사항이 있으십니까?

Answer 1

부트 스트랩 4 모달을 사용하고 있습니다. My solution;

$(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'); 
     } 
});