스크롤 가능 모달
분류: 모달
스크롤 가능 모달은 modal-dialog에 modal-dialog-scrollable을 추가한 형태로, 이용약관이나 개인정보 처리방침처럼 내용이 화면 높이보다 길어질 수 있는 본문을 담을 때 사용합니다. 이 옵션이 없으면 내용이 길어질수록 모달 전체(뒤쪽 페이지 포함)가 스크롤되지만, modal-dialog-scrollable을 적용하면 헤더와 푸터는 고정된 채 modal-body 영역만 자체적으로 스크롤됩니다.
소스
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-scrollable">
스크롤 가능 모달
</a>
<div class="modal modal-blur fade" id="modal-scrollable" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" 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">
<p>이 모달은 내용이 길어질 경우 스크롤이 가능합니다.</p>
<p>스크롤 가능한 모달은 사용자가 많은 양의 정보를 확인해야 할 때 유용합니다. 예를 들어, 서비스 이용 약관이나 개인정보 처리방침 등을 표시할 수 있습니다.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용이 계속됩니다. 스크롤을 내려서 나머지 내용을 확인하세요.</p>
<p>내용의 끝입니다.</p>
</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-dialog-scrollable | 헤더·푸터는 고정하고 modal-body만 자체 스크롤되도록 설정 |
modal-content | 헤더·본문·푸터를 감싸는 콘텐츠 박스 |
modal-header / modal-title | 상단 제목 영역 / 제목 텍스트 스타일 |
modal-body / modal-footer | 스크롤되는 본문 영역 / 버튼 영역 |
btn, btn-primary | 기본 버튼, 강조(주 작업) 버튼 색상 |
btn-close | 우측 상단 닫기(×) 아이콘 버튼 |
me-auto | 닫기 버튼을 왼쪽으로 밀어 저장 버튼과 간격을 자동으로 벌림 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/모달-스크롤-가능-모달.html 경로에서 렌더링 결과를 확인할 수 있습니다.