큰 모달

분류: 모달

큰 모달은 modal-dialog에 modal-lg를 추가해 기본 모달보다 너비를 넓힌 형태입니다. 입력 항목이 많은 폼이나 설명이 긴 내용처럼 기본 크기(modal-dialog)로는 좁게 느껴지는 콘텐츠를 담을 때 사용하며, 반대로 삭제 확인처럼 짧은 내용에는 작은 모달의 modal-sm을 사용합니다.

소스

<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-large">
    큰 모달
</a>

<div class="modal modal-blur fade" id="modal-large" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg 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-lg	모달 너비를 넓게(large) 설정
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 경로에서 렌더링 결과를 확인할 수 있습니다.

미리보기새 창에서 열기 ↗

참고 자료

• Modals