목차
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 ">
