목차
- Modal 정의
- Modal 생성
- Modal 애니 효과 (= fade 효과)
- Modal 크기
- Modal 전체화면
- Modal 반응형 전체화면
- Modal 중앙 배치
- Modal 스크롤링
Modal 정의
현재 페이지 상단에 표시되는 '대화상자/팝업창' 의미.
Modal 생성
<div class="container mt-3">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#Hz">모달 열기</button>
</div>
<!-- 모달창 -->
<div class="modal" id="Hz">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal 제목</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal 내용
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
Modal 애니 효과 (= fade 효과)
※ .modal 클래스 옆에 .fade 클래스 추가.
...
<div class="modal fade" id="Hz">
...
Modal 크기
.modal-dialog 클래스 (기본값: 최대 500px) 옆에 아래 클래스 추가.
- 최대 300px: <div class="modal-dialog modal-sm">
- 최대 800px: <div class="modal-dialog modal-lg">
- 최대 1440px: <div class="modal-dialog modal-xl">
Modal 전체화면
.modal-dialog 클래스 옆에 .modal-fullscreen 클래스 추가.
<div class="modal-dialog modal-fullscreen">
Modal 반응형 전체화면
.modal-dialog 클래스 옆에 아래 클래스 추가.
- 576px 미만 시 전체화면: <div class="modal-dialog modal-fullscreen-sm-down">
- 768px 미만 시 전체화면: <div class="modal-dialog modal-fullscreen-md-down">
- 992px 미만 시 전체화면: <div class="modal-dialog modal-fullscreen-lg-down">
- 1200px 미만 시 전체화면: <div class="modal-dialog modal-fullscreen-xl-down">
- 1400px 미만 시 전체화면: <div class="modal-dialog modal-fullscreen-xxl-down">
Modal 중앙 배치
.modal-dialog 클래스 옆에 .modal-dialog-centered 클래스 추가 시, 수직/수평 상 중앙에 배치됨.
<div class="modal-dialog modal-dialog-centered">
Modal 스크롤링
기본 모달 경우, 모달 내용 많을 시 페이지 전체가 스크롤 됨. 그런데, .modal-dialog-scrollable 클래스 추가 시 모달 내부에서만 스크롤됨.
<div class="modal-dialog modal-dialog-scrollable">
