Bootstrap 中的模态对话框

许多 CSS 工具包包含用于创建模式对话框的样式（和 Javascript）。此示例展示了如何将 HTMX 与 Bootstrap 提供的原始 JavaScript 一起使用。

¥Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes. This example shows how to use HTMX alongside original JavaScript provided by Bootstrap.

我们从一个触发对话框的按钮开始，并在标记底部使用一个 DIV 来加载对话框：

¥We start with a button that triggers the dialog, along with a DIV at the bottom of your markup where the dialog will be loaded:

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

¥This button uses a GET request to /modal when this button is clicked. The contents of this file will be added to the DOM underneath the #modals-here DIV.

服务器使用 Bootstrap 标准模式的略微修改版本进行响应

¥The server responds with a slightly modified version of Bootstrap’s standard modal

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

🔗Demo