Bootstrap Modal Component Code를 다양한 방법으로 적용해보고 옵션까지 변경해보자.

1. CDN
2. ProjectManager(NPM)
3. ProjectManager(NPM) + Tree Shaking(트리 쉐이킹)
4. Edit Options(옵션 변경)

link: https://getbootstrap.com/docs/5.0/components/modal/

index.html - body

<!-- 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>

CDN

CDN을 통해 bootstrap을 설치 없이 사용함.

index.html - head

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"></head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

ProjectManager(NPM)

ProjectManager을 통해 bootstrap을 설치하여 사용함.

terminal - npm install

npm install bootstrap@next

main.scss

@import "../node_modules/bootstrap/scss/bootstrap";

main.js

import bootstrap from "bootstrap/dist/js/bootstrap.bundle";

ProjectManager(NPM) + Tree Shaking(트리 쉐이킹)

bootstrap에는 다양한 모듈이 집약되어 있기에, 로드하는데에 많은 자원을 할애할 수 있음.
따라서, tree shaking을 통해 사용하지 않는 코드를 제거 할 수 있음.
즉, 필요한 기능만을 정적으로 import해서 사용함.

terminal - npm install

npm install bootstrap@next

main.scss

@import "../node_modules/bootstrap/scss/bootstrap";

js 예시 코드 참고
Bootstrap Document > Component > modal > via-javascript
https://getbootstrap.com/docs/5.0/components/modal/#via-javascript

main.js

import Modal from "bootstrap/js/dist/modal";

// modal
new Modal(document.getElementById("exampleModal"))
// const myModal = new bootstrap.Modal(document.getElementById('exampleModal'), options)

Edit Options(옵션 변경)

Modal Component의 옵션을 변경해보자.

main.js

new Modal(document.getElementById("exampleModal"), {
  backdrop: "static",
  keyboard: false
  focus : false
});

---

• 참고
  Bootstrap Modal Component: https://getbootstrap.com/docs/5.0/components/modal/

---

• 2021.04.23 - 최초 작성

---

댓글 환영 질문 환영
by.protect-me