Bootstrap 5.x 使用 javascript 顯示與隱藏 Modal

如果要使用 bootstrap 來控制內建 Modal 的顯示或隱藏，可以參考其文件說明，先準備一個 Modal 並給定一個可以識別的 id(或 class 也行)，像是：

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

接著透過 javascript 建立 Bootstrap 的物件：

const myModal = new bootstrap.Modal('#exampleModal')

第一個參數指定 Modal，第二個參數是選擇性的可以參考 Bootstrap 的 options。

接著就可以透過 show(), hide() 顯示跟隱藏 Modal。

//顯示 Modal
myModal.show();

//隱藏 Modal
myModal.hide();