Displaying Error Modals in HTMX for a Seamless User Experience
HTMX is a powerful library that simplifies building modern, dynamic web applications. While HTMX makes it easy to create interactive…
Displaying Error Modals in HTMX for a Seamless User Experience
HTMX is a powerful library that simplifies building modern, dynamic web applications. While HTMX makes it easy to create interactive interfaces, handling errors gracefully is crucial for maintaining a smooth user experience. In this post, I’ll walk you through one effective approach for displaying global error modals — ensuring that when something goes wrong, your users are alerted with a consistent, user-friendly interface. Let’s dive in!
Non member, can read full story here
Now, let’s look at the error-modal.js file, which contains the code responsible for showing and hiding the error modal.
function showHtmlModal(html) {
let page = document.createElement('html')
page.innerHTML = html
let modal = document.getElementById('htmx-server-error')
if (typeof modal != 'undefined' && modal != null) {
// Modal already exists.
modal.innerHTML = ''
} else {
modal = document.createElement('div')
modal.id = 'htmx-server-error'
modal.style.position = 'fixed'
modal.style.width = '100vw'
modal.style.height = '100vh'
modal.style.padding = '50px'
modal.style.backgroundColor = 'rgba(0, 0, 0, .6)'
modal.style.zIndex = 200000
}
let iframe = document.createElement('iframe')
iframe.style.backgroundColor = '#17161A'
iframe.style.borderRadius = '5px'
iframe.style.width = '100%'
iframe.style.height = '100%'
modal.appendChild(iframe)
document.body.prepend(modal)
document.body.style.overflow = 'hidden'
iframe.contentWindow.document.open()
iframe.contentWindow.document.write(page.outerHTML)
iframe.contentWindow.document.close()
// Close on click.
modal.addEventListener('click', () => hideHtmlModal(modal))
// Close on escape key press.
modal.setAttribute('tabindex', 0)
modal.addEventListener('keydown', e => {
if (e.key === 'Escape') hideHtmlModal(modal)
})
modal.focus()
}
function hideHtmlModal(modal) {
modal.outerHTML = ''
document.body.style.overflow = 'visible'
}Next, let’s take a look at the index.html file, where we include both the error-modal.js file and the HTMX library. In this file, we also set up an event listener for HTMX’s htmx:responseError event, which triggers the error modal whenever an error occurs. This event ensures that any failed request will result in showing the modal, keeping users informed and engaged. Below is an example of how you can integrate these components.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script src="/error-modal.js"></script>
</head>
<body>
<div class="container">
....
</div>
<script>
document.addEventListener('htmx:responseError', evt => {
const xhr = evt.detail.xhr;
showHtmlModal(xhr.responseText);
}
});
</script>
</body>
</html>Thanks for reading…
메타데이터
- post_id
- 55cc87add5ea
- slug
- displaying-error-modals-in-htmx-for-a-seamless-user-experience-55cc87add5ea
- url
- https://medium.com/@anuj_jaryal/displaying-error-modals-in-htmx-for-a-seamless-user-experience-55cc87add5ea
- canonical_url
- https://medium.com/@anuj_jaryal/displaying-error-modals-in-htmx-for-a-seamless-user-experience-55cc87add5ea
- author_url
- https://medium.com/@anuj_jaryal
- status
- ok
- fetched_at
- 2026-06-26 21:52:29
