6-5. 모달 창
■ 모달 창
모달(modal) 요소는 현재 페이지 위에 표시되는 팝업 창입니다.
<div class="container mt-3">
<h3>모달 창(modal window)</h3>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">
버튼 클릭!
</button>
</div>
<!-- The Modal -->
<div class="modal" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">모달 창 제목</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
모달 창의 내용입니다.
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
ex6-20.html의 실행 결과