Bootstrap でモーダルダイアログを作成

多くの CSS ツールキットには、モーダルダイアログボックスを作成するためのスタイル（および JavaScript）が含まれています。この例は、Bootstrap で提供されるオリジナルの JavaScript と HTMX を一緒に使用する方法を示します。

トリガーするボタンとマークアップの下部にダイアログをロードする DIV を用意することから始めます。

<button
    hx-get="/modal"
    hx-target="#modals-here"
    hx-trigger="click"
    data-bs-toggle="modal"
    data-bs-target="#modals-here"
    class="btn primary">Open Modal</button>

<div id="modals-here"
    class="modal modal-blur fade"
    style="display: none"
    aria-hidden="false"
    tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content"></div>
    </div>
</div>

このボタンは、ボタンをクリックしたときに GET リクエストを使用して /modal に送信します。このファイルの内容は、#modals-here DIV の下に DOM に追加されます。

サーバーは Bootstrap の標準的なモーダルのわずかに変更されたバージョンで応答します。

<div class="modal-dialog modal-dialog-centered">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Modal title</h5>
    </div>
    <div class="modal-body">
      <p>Modal body text goes here.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    </div>
  </div>
</div>

🔗デモ