[Bootstrap] Modal

1. 기본 구조

• Modal(모달)은 현재 페이지 위에 표시되는 팝업 창
• 사용자에게 알림을 표시하거나 폼 입력 등을 받을 때 사용

<!-- 버튼 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>

<!-- 모달 -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- 헤더 -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- 본문 -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- 푸터 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

 

---

2. 효과 및 크기 조절

기능 클래스	설명
페이드 효과	`.fade` 추가 (`<div class="modal fade">`)
작은 모달	`.modal-sm` (max-width: 300px)
기본 사이즈	아무 크기 클래스 없이 사용 (max-width: 500px)
큰 모달	`.modal-lg` (max-width: 800px)
매우 큰 모달	`.modal-xl` (max-width: 1140px)
전체 화면 모달	`.modal-fullscreen`
반응형 전체화면	`.modal-fullscreen-sm-down`, `.modal-fullscreen-md-down` 등

---

3. 기타 유용한 클래스

목적	클래스	설명
중앙 정렬	`.modal-dialog-centered`	세로 가운데 정렬
내부 스크롤	`.modal-dialog-scrollable`	모달 내용만 스크롤 가능하게
닫기 버튼	`data-bs-dismiss="modal"`	클릭 시 모달 닫힘 처리

 

<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <!-- 모달 내용 구성 -->
    </div>
  </div>
</div>