[Bootstrap] Bootstrap 멀티 모달 Z-index로 순서 처리하기

개요

이번 글은 Bootstrap에서 모달 여러개를 사용할 때(멀티 모달) 노출 순서를 정하는 방법을 Z-index로 처리하는 방법에 대해 이야기해 보려고 한다.

예를 들어?

예를 들어 게시판 삭제/수정 기능을 구현할 때 옵션 버튼을 눌러 첫 번째 모달로 게시판의 삭제를 진행할 것인지, 게시판의 내용을 수정할 것인지 선택하게 하고 이후 수정 기능을 선택했다면 수정 관련 모달창이 또 나타나는 구조의 게시판이 있다고 가정할 때 옵션 선택 모달창이 수정 관련 모달창을 가려버리게 된다면 수정 관련 기능을 사용할 수 없을 것이다.

이 문제를 해결하기 위하여 우리는 Style을 주어 모달의 순서를 처리해 줄 수 있다.

해결 방법

=> 모달의 z-index를 설정해주면 된다.

부트스트랩 공식 레퍼런스

부트스트랩의 공식 레퍼런스를 확인해 보면 모달의 z-index를 직접 확인할 수 있는데 우리가 지금 사용하고 있는 모달의 z-index가 1040라고 가정하면 가장 먼저 노출시키고 싶은 모달은 이전의 모달들 보다 z-index를 그보다 높게 설정하면 된다.

// 제일 먼저 노출시키고 싶은 모달
<div class="modal fade" id="editBtn" style="z-index: 1060;">

// 2번째로 먼저 노출시키고 싶은 모달
<div class="modal fade" id="delBtn" style="z-index: 1050;">

// 3번째로 먼저 노출시키고 싶은 모달
<div class="modal fade" id="optionBtn" style="z-index: 1040;">

이렇듯 z-index가 높으면 높을 수록 가장 먼저 노출된다.