프론트엔드 정복하기
bootstrap | 모달 backgdrop (검은배경) 관리 본문
bootstrap 모달을 열 때 모달창 뒤에 검은 화면이 생성된다.
이 검은 화면 요소는 어디에 위치해 있을까?
다음과 같이 body태그 맨 끝에 'modal-backdrop'이라는 클래스를 가지고 생성된다.
<body>
<h1></h1>
...
...
<script></script>
...
<div class="modal-backdrop"></div>
</body>
만약 모달창이 연달아서 여러 개 생성될 경우, 나중에 생성된 모달창의 backdrop이 기존의 backdrop에 이어서 body 태그 맨 끝에 생성된다.
<body>
<h1></h1>
...
...
<script></script>
...
<div class="modal-backdrop"></div> //먼저 생성된 모달의 back
<div class="modal-backdrop"></div> //나중에 생성된 모달의 back
</body>
모달창을 연달아 여러 개 띄울 경우, 문제가 하나 생긴다.
| 흰색 모달 박스를 띄운 후 => 버튼을 클릭하면 => 하늘색 alert모달창이 흰색 박스 위에 뜨도록 하고 싶었다. 즉, 하늘색 alert모달창의 backdrop에 흰색 모달박스가 가려지도록 하고 싶었다. |
하지만 backdrop은 모달 컨텐츠들의 뒷켠에 연달아 생기기 때문에, 컨텐츠들은 전부 backdrop들의 위로 떠오르게 된다.
이를 해결하기 위해서는 .modal-backdrop의 z-index값을 조정하면 된다.
하지만 backdrop은 'modal-backdrop'라는 클래스만을 가지고 태어나기 때문에 특정 모달의 backdrop을 조정하고 싶다면
eq(), last(), first() 등의 jquery 선택자를 사용해야 한다.
예를들어,
가장 나중에 생성된 모달창을 제어하고 싶다면?
$('.modal-backdrop').last().css("z-index", "9999");
last() 대신 fist() 혹은 eq(n)으로 제어할 수도 있다.
'CSS > CSS 프레임워크' 카테고리의 다른 글
| Bulma - React에 적용하는 방법 (0) | 2021.01.25 |
|---|---|
| Grid System (0) | 2020.06.16 |
| min파일 활용 Tip (0) | 2020.06.16 |
| AntDesign (0) | 2020.06.03 |
| React_CSS FRAMEWORK for React.js 종류 (0) | 2020.05.21 |