Bootstrap에서 보이는 배경으로 여러 모달 오버레이를 올바르게 확인하는 방법은 무엇입니까?

다중 모달 오버레이

이 시나리오에서는 오버레이가 첫 번째 모달 뒤가 아닌 위에 표시되기를 원합니다.

솔루션

@YermoLamers 및 @Ketwaroo의 기여에서 영감을 받은 포괄적인 솔루션에는 다음이 포함됩니다.

Backdrop Z-Index Fix

첫 번째 모달 뒤에 나타나는 배경 문제를 해결하려면 다음 JavaScript를 구현하세요.

<code class="javascript">$(document).on('show.bs.modal', '.modal', function() {
  const zIndex = 1040 + 10 * $('.modal:visible').length;
  $(this).css('z-index', zIndex);
  setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});</code>

Z-Index 사용자 정의

원하는 경우 Z-인덱스 계산을 사용자 정의하려면 다음을 사용할 수 있습니다.

<code class="javascript">const zIndex = 10 +
  Math.max(...Array.from(document.querySelectorAll('*')).map((el) => +el.style.zIndex));</code>

스크롤바 수정

두 번째 모달을 닫으면 모달에서 스크롤이 불가능한 경우를 해결하려면 브라우저 높이를 초과하는 경우 다음 JavaScript를 포함하십시오.

<code class="javascript">$(document).on('hidden.bs.modal', '.modal',
  () => $('.modal:visible').length && $(document.body).addClass('modal-open'));</code>

버전

이 솔루션은 Bootstrap 버전 3.1.0~3.3.5에서 철저하게 테스트되었습니다. 이 솔루션을 구현하면 배경이 첫 번째 모달 위에 표시되고 스크롤바가 필요에 따라 계속 작동하면서 여러 모달이 올바르게 오버레이되도록 할 수 있습니다.

위 내용은 Bootstrap에서 보이는 배경으로 여러 모달 오버레이를 올바르게 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!