로그인  회원가입  
인포앤북 홈

6-5. 모달 창

■ 모달 창

모달(modal) 요소는 현재 페이지 위에 표시되는 팝업 창입니다.

모달 창
ex6-20.html
<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의 실행 결과