6. Server-side Powered Modals

Modals are a valuable tool for grabbing the attention of a user when something critical has occurred. In this sample, we'll utilize Bootstrap's modal by having HTMX inject the resulting HTML after we've submitted the form. You'll use the hx-trigger of submit on the form element to include all the information located within the form tag.

We'll use some optional JavaScript to transition the modal in with some animation. We also have some additional JavaScript to handle Bootstrap's validation classes. Finally, a clientside function named closeModal removes the HTML from the page when you've dismissed the modal. You probably noticed the utilization of htmx:afterOnLoad. HTMX has many events that each HTMX infused element can hook into to do pre-and post-processing.

The modal is an excellent example of leveraging clientside code to enhance the HTMX experience. While you could certainly achieve the same behaviors with HTMX calls to the server, you want to remain mindful of any unnecessary network traffic.