Bootstrap에서 여러 모달을 사용하여 올바른 모달 스태킹을 보장하는 방법은 무엇입니까?

다중 모달 오버레이

여러 모달이 있는 인터페이스에서는 열린 모달이 올바르게 스택되어 각각의 새로운 모달이 나타나는지 확인하는 것이 중요합니다. 이전 것보다 위에. 그러나 개발자가 직면하는 일반적인 문제는 후속 모달이 기존 모달 뒤에 표시되어 바람직하지 않은 오버레이를 생성할 수 있다는 것입니다.

이 문제를 해결하려면 모달 배경의 Z-색인 속성을 수정하는 것과 관련된 솔루션이 필요합니다. 해당 요소가 표시됩니다.

Backdrop z-index Fix

모달 배경화면의 올바른 스택 순서를 보장하기 위해 맞춤형 솔루션이 구현됩니다. 특히 show.bs.modal 이벤트 트리거 중에는 모달 배경화면이 없기 때문에 setTimeout 기능이 활용됩니다.

<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-색인 값을 선호하는 경우 페이지에서 가장 높은 Z-색인을 계산하는 대체 방법을 사용할 수 있습니다.

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

스크롤바 수정

모달이 브라우저 높이를 넘어 확장될 때 스크롤과 관련된 잠재적인 문제를 해결하기 위해 추가 스크립트를 구현할 수 있습니다:

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!