• Bootstrap5 - Components - Modal

Modal

• 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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <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>

‘BoardListView.vue’의 페이징 아래 붙여넣기

<aside> 💡

Bootstrap 내부적으로 모달 open / close가 구현되어 있다

나는 Bootstrap 안쓰고 Vue로 open / close로 구현할 거임

</aside>

🔹 AppModal.vue 컴포넌트 분리

• 마크업 가져오기

1. 개발자 도구로 요소 검사로 오버레이를 클릭하면 모달이 클릭된다.

   

2. 키보드 [H]를 눌러 이 태그를 숨긴다.

3. 다시 요소 검사로 이 오버레이를 클릭한뒤 복사한다

   

4. button태그를 지우고 붙여넣기. *modal 클래스에 show d-block추가, id값 지우기,

   

   버튼 제거, modal의 id값 제거

• ‘AppModal.vue’ template

외부에서 사용할 수 있도록 변경하기