bootstrap 모달(modal)

웹 브라우저 위에 팝업 형태로 나오는 요소.

Documentation → Components →Modal

​

data-toggle="modal'을 선언하면

모달을 작동시키는 버튼이다.

data-target="#exampleModal"

id를 갖는 요소라는 의미.

​

부트스트랩 LIve demo모달 소스

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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 btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

class="modal fade" 모달임을 선언.

id="exampleModal" <button> 태그에서 data-target 지정한 모달의 id값과 연결.

​