페이지에서 새로고침 없이 사용자에게 정보를 표시하거나 입력 받을 때는 어떻게 해야 할까요? 정말 여러가지 방법이 있지만 부트스트랩의 “모달”은 이를 정말 쉽게 구현할 수 있게 도와줍니다.
모달이란?
모달창은 웹 페이지에서 부분적으로 띄워진 독립적인 창으로, 주로 정보를 표시하거나 사용자로부터 추가 입력을 받을 때 사용되는 팝업 형태의 UI 요소입니다.
모달 만들기
https://getbootstrap.com/docs/5.3/components/modal/
위의 링크로 들어가 원하는 모달창 코드를 복사합니다.
모달창을 띄울 버튼 태그는 원하는 위치에 넣습니다.
모달 div는 하단에 추가 합니다.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
코드 설명
버튼 코드data-bs-toggle="modal"
및 data-bs-target="#exampleModal"
:
- 해당 버튼이 모달을 토글하도록 지정합니다.
#exampleModal
은 모달의 ID입니다.
모달 코드
fade
- 모달이 나타날 때 페이드 인/아웃 효과를 제공합니다.
모달 내용 수정
modal-body
태그 안에 모달창에 넣을 내용을 넣습니다.
이번 예제에서는 아래와 같이 입력을 받는 모달창을 만들어 보겠습니다.
위와 같은 입력은 form
태그로 구현을 하는데요.form
태그 예제는 Forms · Bootstrap v5.3 (getbootstrap.com) 에서 가져옵니다.
원하는 form
태그를 modal-body
클래스 태그 안에 넣습니다.
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
코드 설명
mb-3
클래스는 여백을 조절하는 클래스 입니다.mb는
margin-bottom을 나타내며, 숫자 3은 여백의 크기를 나타냅니다
input
type 속성과 이름을 쓰임에 맞게 변경하여 사용합니다.
결과
저는 input
태그를 추가하고 “text
” 타입으로 변경하고 하단의 버튼을 삭제 했습니다.
모달을 수직 중앙에 띄우기
모달창은 기본적으로 상단에 띄워집니다. 모달창을 브라우저의 수직 중앙에 띄우기 위해서는 modal-diaglog
클래스에 modal-dialog-centered
를 붙여줍니다.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
Static backdrop : 배경을 눌러도 꺼지지 않는 모달창
기본 모달창은 모달창을 닫기버튼을 누르지 않아도 모달창 외부를 누르면 자동으로 종료되었습니다. Static backdrop 모달창은 모달창 닫기 버튼을 누르지 않는 이상 모달창이 종료되지 않습니다.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
스크롤링 모달
클래스에 modal-dialog-scrollable
을 넣음으로써 스크롤링을 추가할 수 있습니다.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
모달 사이 토글
모달창의 버튼을 클릭하면 해당 모달창이 꺼지고 새로운 모달창이 띄워지게 할 수 있습니다.
data-bs-target
및 data-bs-toggle
속성을 배치하여 여러 모달 간을 전환합니다.
예를 들어 이미 열려 있는 로그인 모달 내에서 비밀번호 재설정 모달을 전환할 수 있습니다.
여러 모달을 동시에 열 수는 없습니다. 이 방법은 단순히 두 개의 개별 모달 사이를 전환합니다.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>
Full screen 모달
.modal-dialog에 modal-fullscreen를 더함으로써 모달창이 화면 전체에 띄워지게 할 수 있습니다.
반응형으로 특정 화면 사이즈 이상에서는 일반 모달창을 이하에서는 전체화면 모달창을 띄울 수도 있습니다.
Class | Availability |
---|---|
.modal-fullscreen | Always |
.modal-fullscreen-sm-down | 576px |
.modal-fullscreen-md-down | 768px |
.modal-fullscreen-lg-down | 992px |
.modal-fullscreen-xl-down | 1200px |
.modal-fullscreen-xxl-down | 1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>