menu-btn

Modals

Modals

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

# Modal Content

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

# See Also

← Introduction →