[basic] BS5 - Modal (BS모달)

1. Modal 정의
2. Modal 생성
3. Modal 애니 효과 (= fade 효과)
4. Modal 크기
5. Modal 전체화면
6. Modal 반응형 전체화면
7. Modal 중앙 배치
8. 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">