Custom JavaScript modal overlays
Possible replacement: <dialog>
Why it may help
- Deletes custom focus-trap logic and open-state tracking.
- Lets the browser handle top-layer rendering and Escape key dismissal.
- Provides modal semantics and focus management with less custom JavaScript.
Found on this page
.newsletter-modal
#mobile-menu
Newsletter signup and mobile navigation overlays (2 instances)
Current HTML + JavaScript
<div class="modal" role="dialog"
aria-modal="true" hidden>
<button class="modal__close">Close</button>
<!-- modal content -->
</div>
/* Original JavaScript excerpt */
const modal = document.querySelector('.modal');
trigger.addEventListener('click', () => {
modal.hidden = false;
trapFocus(modal);
});Modern alternative
<dialog id="site-modal">
<form method="dialog">
<button>Close</button>
</form>
<!-- modal content -->
</dialog>
const modal = document.querySelector('#site-modal');
trigger.addEventListener('click', () => modal.showModal());