8. [PHP] 부트스트랩 멀티모달 순서

안녕하세요. 부트스트랩을 사용하다 보면 여러 모달을 사용해야 할 때가 있습니다.

그러나 여러개다 보니 모달 화면의 우선순위를 정해줘야 할때가 있는데요.

이 때 모달의 style에 z-index를 추가해주면 됩니다.

 

 

모달이 생성되면 기본적으로 z-index는 1040 입니다.

이 값보다 높게 할당해주면 됩니다.

z-index 값이 클수록 더 위에 노출됩니다.

 

저 같은 경우에는 위의 동영상에서 가장 먼저 보여지는 '품명 추가'  모달의 z-index는 1041, 그 다음 보여지는 '카테고리 추가' 모달의 z-index는 1050, 그 다음 보여지는 '카테고리 확인' 모달의 z-index는 1060 입니다.

 

처음 보여지는 모달의 값이 1040보다 높은 1041 이어야 합니다.

이유는 모달이 팝업될 때 모달 백드롭 이라는 검은색 화면이 같이 모달 뒤로 펼쳐지는데 이 값이 1040이기 때문입니다.

 

<!-- 품명 추가 모달 -->
<div id="insert_data_Modal" style="z-index:1041;" class="modal fade">

</div>

<!-- 카테고리 추가 모달 -->
<div id="insert_category_Modal" style="z-index:1050;" class="modal fade">

</div>

<!-- 카테고리 확인 모달 -->
<div id="category_data_Modal" style="z-index:1060;" class="modal fade"> 

</div>

 

감사합니다.