Bootstrap模态对话框

许多CSS工具包都包含创建模态对话框的样式（和JavaScript）。 这个示例展示了如何将HTMX与Bootstrap提供的原生JavaScript配合使用。

我们从触发对话框的按钮开始，以及在标记底部放置一个DIV用于加载对话框：

<button
    hx-get="/modal"
    hx-target="#modals-here"
    hx-trigger="click"
    data-bs-toggle="modal"
    data-bs-target="#modals-here"
    class="btn primary">打开模态框</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>

这个按钮在被点击时会向/modal发送GET请求。 该文件的内容将被添加到DOM中#modals-here DIV的下方。

服务器响应一个略微修改过的Bootstrap标准模态框

<div class="modal-dialog modal-dialog-centered">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">模态标题</h5>
    </div>
    <div class="modal-body">
      <p>模态框内容文本放在这里。</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
    </div>
  </div>
</div>

🔗演示