부트스트랩에서 겹치는 모달을 수정하는 방법: setTimeout 및 Z-Index 관리를 사용한 간단한 솔루션.-JS 튜토리얼-php.cn

부트스트랩에서 겹치는 모달을 수정하는 방법: setTimeout 및 Z-Index 관리를 사용한 간단한 솔루션.

Barbara Streisand

풀어 주다： 2024-10-26 02:14:02

원래의

501명이 탐색했습니다.

How to Fix Overlapping Modals in Bootstrap: A Simple Solution with setTimeout and Z-Index Management.

쉽게 오버레이되는 여러 모달

여러 모달이 서로 겹쳐지는 것은 실망스러울 수 있습니다. 특히 새 모달을 맨 위에 표시해야 하는 경우에는 더욱 그렇습니다. 기존 것 뒤에. 이 문제를 해결하기 위해 우리는 @YermoLamers와 @Ketwaroo라는 두 명의 훌륭한 기여자로부터 영감을 받은 솔루션을 탐구할 것입니다.

Backdrop Z-Index Fix

이 솔루션은 show.bs.modal 이벤트가 트리거될 때 .modal-backdrop 요소가 아직 생성되지 않았기 때문에 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>

로그인 후 복사

이 접근 방식에는 여러 가지 장점이 있습니다.

동적으로 생성된 요소를 포함하여 페이지의 모든 .modal 요소에 적용됩니다.
배경이 이전 모달에 즉시 오버레이됩니다.

Z-색인 계산

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에서 테스트되었습니다.

JSFiddle 예

[JSFiddle 예](https://jsfiddle.net/)

위 내용은 부트스트랩에서 겹치는 모달을 수정하는 방법: setTimeout 및 Z-Index 관리를 사용한 간단한 솔루션.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!