Modals can be displayed using the AJAX framework by performing a partial update that targets the modal's content element. When the element has a pending update the data-ajax-updating attribute will be attached to it, and this is used to display a loading state while the content loads.
In the following examples, we will use the Modal component provided by Bootstrap 5.
The modal content is specified inside the my-modal-content.htm partial.
<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>The button to trigger the modal is paired with an AJAX request to request the partial and load the contents in to the element with the ID named 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>The following modal definition is generic and can be added to any page or layout. It contains two modal-dialog elements. The first is used as the target container for the partial contents, and the second is used to show a loading state while the request loads.
<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>For the loading status, a stylesheet is used to show the loading dialog during an AJAX request, which is decided by the data-ajax-updating attribute. This attribute is added to an element when it is a candidate for a partial update and a request is pending.
.modal-dialog[data-ajax-updating],
.modal-dialog:not([data-ajax-updating]) + .modal-loading {
display: none;
}