전체 너비 모달
분류: 모달
전체 너비 모달은 modal-dialog에 modal-full-width를 추가해 화면 가로 전체를 모달 상자로 사용하는 형태입니다. 표나 대시보드처럼 가로 공간이 많이 필요한 콘텐츠를 모달 안에서 보여줘야 할 때 기본 모달 대신 사용합니다. 나머지 헤더·본문·푸터 구조는 기본 모달과 동일합니다.
소스
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-full-width">
전체 너비 모달
</a>
<div class="modal modal-blur fade" id="modal-full-width" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-full-width 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-full-width | 모달 상자를 화면 가로 전체 너비로 확장 |
modal-dialog-centered | 화면 세로 중앙 배치 |
modal-content | 헤더·본문·푸터를 감싸는 콘텐츠 박스 |
modal-header / modal-title | 상단 제목 영역 / 제목 텍스트 스타일 |
modal-body / modal-footer | 본문 영역 / 버튼 영역 |
btn, btn-primary | 기본 버튼, 강조(주 작업) 버튼 색상 |
btn-close | 우측 상단 닫기(×) 아이콘 버튼 |
me-auto | 닫기 버튼을 왼쪽으로 밀어 저장 버튼과 간격을 자동으로 벌림 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/모달-전체-너비-모달.html 경로에서 렌더링 결과를 확인할 수 있습니다.