부트스트랩 4 모달
부트스트랩 4 모달
Modal 구성 요소는 현재 페이지 상단에 표시되는 대화 상자/팝업 창입니다.
모달을 만드는 방법
다음 예제에서는 기본 모달을 만드는 방법을 보여줍니다.
예시
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
애니메이션 추가
클래스를 사용 .fade하여 모달을 열고 닫을 때 페이딩 효과를 추가합니다.
예시
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
모달 크기
.modal-sm
작은 모달에 .modal-lg대한 클래스, 큰 모달에 대한 클래스 또는 초대형 모달에 대한 클래스를 추가하여 모달의 크기를 변경합니다 .modal-xl.
<div>class가 있는 요소 에 크기 클래스를 추가합니다 .modal-dialog.
작은 모달
<div class="modal-dialog modal-sm">
대형 모달
<div class="modal-dialog modal-lg">
초대형 모달
<div class="modal-dialog modal-xl">
기본적으로 모달의 크기는 "중간"입니다.
중심 모달
.modal-dialog-centered
클래스 를 사용하여 페이지 내에서 모달을 세로 및 가로 중앙에 배치합니다 .
예시
<div class="modal-dialog modal-dialog-centered">
스크롤링 모달
모달 내부에 콘텐츠가 많으면 페이지에 스크롤바가 추가됩니다. 이해하려면 아래 예를 참조하십시오.
예시
<div class="modal-dialog">
.modal-dialog-scrollable그러나 다음을 추가 하여 페이지 자체 대신 모달 내부에서만 스크롤할 수 있습니다 .modal-dialog.
예시
<div class="modal-dialog modal-dialog-scrollable">
완전한 부트스트랩 모달 참조
모든 모달 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS Modal Reference 로 이동하십시오 .