模态框可以使用 AJAX 框架显示，方法是执行以模态框内容元素为目标的局部更新。当元素有待处理的更新时，data-ajax-updating 属性将附加到它上面，这用于在内容加载时显示加载状态。
在以下示例中，我们将使用由 Bootstrap 5 提供的 模态框组件。
:::
弹窗内容在 my-modal-content.htm 片段中指定。
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Modal Title
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</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>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>触发模态框的按钮与一个AJAX请求配对，该请求用于请求局部视图，并将内容加载到ID名为 siteModalContent 的元素中。
<button
type="button"
class="btn btn-primary"
data-request="onAjax"
data-request-update="{ 'my-modal-content': '#siteModalContent' }"
data-bs-toggle="modal"
data-bs-target="#siteModal">
Launch demo modal
</button>以下模态定义是通用的，可以添加到任何页面或布局。它包含两个 modal-dialog 元素。第一个用作部分内容的目标容器，第二个用于在请求加载时显示加载状态。
<div class="modal" id="siteModal">
<div class="modal-dialog modal-dialog-centered" id="siteModalContent">
<!-- Partial Contents Will Go Here -->
</div>
<div class="modal-dialog modal-dialog-centered modal-loading">
<div class="spinner-border text-light mx-auto"></div>
</div>
</div>对于加载状态，使用样式表在 AJAX 请求期间显示加载对话框，这由 data-ajax-updating 属性决定。当一个元素是局部更新的候选对象且有请求待处理时，此属性会被添加到该元素。
.modal-dialog[data-ajax-updating],
.modal-dialog:not([data-ajax-updating]) + .modal-loading {
display: none;
}