기본 모달
분류: 모달
모달은 현재 화면 위에 별도의 대화 상자를 띄워 사용자의 확인이나 짧은 입력을 받는 컴포넌트입니다. 이 예제는 **제목(modal-header) · 본문(modal-body) · 버튼 영역(modal-footer)**을 모두 갖춘 가장 기본적인 형태로, 다른 모달 변형(작은 모달·큰 모달·폼이 있는 모달 등)은 모두 이 구조에서 크기나 내용만 바꿔서 만듭니다. 트리거 링크의 data-bs-toggle="modal"과 data-bs-target="#모달-id"가 대상 모달을 열고, 모달 안의 data-bs-dismiss="modal" 요소가 모달을 닫습니다.
소스
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-simple">
기본 모달
</a>
<div class="modal modal-blur fade" id="modal-simple" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">모달 제목</h5>
<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 me-auto" data-bs-dismiss="modal">닫기</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">변경사항 저장</button>
</div>
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
modal | 모달 컴포넌트의 최상위 컨테이너 |
modal-blur | 모달이 열렸을 때 뒤쪽 배경을 흐리게 처리 |
fade | 모달이 열리고 닫힐 때 페이드 애니메이션 적용 |
modal-dialog | 실제 모달 상자의 크기·위치를 담당하는 영역 |
modal-dialog-centered | 모달을 화면 세로 중앙에 배치 |
modal-content | 헤더·본문·푸터를 감싸는 카드 형태의 콘텐츠 박스 |
modal-header | 제목과 닫기 버튼이 위치하는 상단 영역 |
modal-title | 모달 제목 텍스트 스타일 |
modal-body | 모달의 본문(내용) 영역 |
modal-footer | 버튼 등 하단 액션 영역 |
btn | 기본 버튼 스타일 |
btn-primary | 강조(주 작업) 버튼 색상 |
btn-close | 우측 상단 닫기(×) 아이콘 버튼 |
me-auto | 좌측 버튼을 밀어내 오른쪽 버튼과 간격을 자동으로 벌림 (margin-right: auto) |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/모달-기본-모달.html 경로에서 렌더링 결과를 확인할 수 있습니다.