Native HTML Series Part 2: <dialog> Element

Welcome to Part 2 of our series on replacing heavy JavaScript UI components with native HTML. In [Part 1] (link to previous post) , we built a zero-JS accordion. Today, we are tackling a notorious front-end headache: the modal. Building a custom modal used to mean fighting with CSS z-index , manually trapping the user's keyboard focus so they couldn't tab behind the modal, and writing script after script to handle closing it when they hit the Escape key. Now, we have the native <dialog> element. The Bare Bones The <dialog> element represents a semantic popup window. While you do use a tiny bit of JavaScript to open it, the browser handles the complex accessibility and stacking context for you. Here is the markup: <button id= "openBtn" > Open Modal </button> <dialog id= "myModal" > <h2> Native Modal Magic </h2> <p> Notice how you can't click the background? The browser handles the focus trap automatically. </p> <form method= "dialog" > <button> Close </button> </form> </dialog> To open