Dynamically load content in to a modal window

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 (opens new window) provided by Bootstrap 5 (opens new window).

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
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    <div class="modal-body">
        <p>Modal body text goes here.</p>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
        <button type="button" class="btn btn-primary">
            Save changes

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.

    class="btn btn-primary"
    data-request-update="{ 'my-modal-content': '#siteModalContent' }"
    Launch demo modal

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 class="modal-dialog modal-dialog-centered modal-loading">
        <div class="spinner-border text-light mx-auto"></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:not([data-ajax-updating]) + .modal-loading {
    display: none;

# See Also