--- title: Modals are much easier than you think date: 2025-02-04 description: Working with modals should not be such a pain! author: nullndr tags: - webdev - html --- # Modals are much easier than you think A modal is an element that appears on top of the main content to capture user attention and interaction. It is typically used for alerts, confirmations, forms, or additional information without navigating away from the current page. When you search for how to create a simple modal you will typically find yourself writing some `
`s styled with CSS and handled by JavaScript. Indeed, this is how [w3schools](https://www.w3schools.com/w3css/w3css_modal.asp) teaches you. Modals are such a basic feature in modern websites that there must be an easier way to handle them... Indeed, there is! Ladies and gentlemens, let me present you the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element, the HTML tag to easily create and control modals. Let the modal be a full page modal, a confirmation modal or an alert modal, `` is what you are looking for. Take for example the following: ```html Hey there! ``` Note how simple it is, we define the buttons in order to handle the open/close state, and the dialog itself. But what about the JavaScript to handle it? Surely it should be quite long, right? Well... ```javascript const openButton = document.getElementById("open-button"); const closeButton = document.getElementById("close-button"); const dialog = document.getElementById("my-modal"); openButton.addEventListener("click", () => { dialog.showModal(); }); closeButton.addEventListener("click", () => { dialog.close(); }); ``` That's it. We simply add an event listener to the `click` event on both buttons, and we open or close the dialog with absolute no pain. But there are even more news! The ` Hey there! ``` No more JavaScript, just simple and old HTML.