Bootstrap에서 올바른 순서로 여러 모달 오버레이를 보장하는 방법은 무엇입니까?

여러 모달 오버레이를 올바른 순서로 만드는 방법

특정 시나리오에서는 동일한 페이지에 여러 모달을 표시해야 하는 경우가 있습니다. 그러나 각 모달이 이전 모달 위에 나타나는지 확인하는 것은 어려울 수 있습니다. 이 기사에서는 특히 두 개 이상의 모달이 관련된 경우 올바른 순서로 모달을 오버레이하는 솔루션을 탐색합니다.

설정

주어진 코드 조각에서 여러 모달( "#myModal" 및 "#myModal2")는 버튼 이벤트를 통해 실행되도록 프로그래밍되어 있습니다. 문제는 "#myModal2" 모달이 겹쳐지지 않고 "#myModal" 모달 뒤에 나타나는 방식에 있습니다.

해결책

해결책은 모달과 배경의 z-index를 효율적으로 관리하는 JavaScript 기능입니다. 아래에 설명된 이 기능은 다음 단계를 구현하여 원하는 동작을 달성합니다.

1. Backdrop Z-Index Fix:

   • A setTimeout 함수는 .modal-backdrop 요소 생성 지연을 해결하는 데 사용됩니다.
   • 각 모달이 표시되면 해당 z-인덱스가 점진적으로 증가하여 이전 모달을 오버레이합니다.
   • .modal-backdrop z-index는 모달의 z-index보다 1 작은 값으로 설정되어 모달을 가리지 않고 배경으로 사용할 수 있습니다.

2. 스크롤바 수정:

   • 브라우저 높이를 초과하는 모달이 닫히면 그 아래에 보이는 모달 내에서 스크롤이 비활성화됩니다. 이 문제를 해결하기 위해 모달이 숨겨져 있을 때 페이지 본문 요소의 modal-open 클래스를 유지하여 스크롤을 다시 활성화하는 함수가 실행됩니다.

코드 조각

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

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

결론

이 솔루션을 구현하면 여러 모달이 올바른 순서로 오버레이되고 배경이 활성 모달 뒤에 일관되게 표시됩니다. 이 기술은 테스트를 거쳤으며 Bootstrap 버전 3.1.0~3.3.5에서 효과적으로 작동합니다.

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