Let’s talk about pop-ups. And modals, overlays, or anything else you like to call them (remember Lightbox?). Despite user experience concerns, these elements remain popular on the web. But technical implementations can be wildly inconsistent. Looking to stop reinventing the wheel? This post will help guide you in your quest to show content on top of other content.
Implementing solutions for pop-ups can be difficult. What seems trivial on the surface can become more complicated in a hurry. You may need to account for modal and popover designs. And animations. How about custom behavior on form submissions? What happens if there is more than one modal trying to display at the same time?
To help with that, you may reach for a plugin solution. But there are so many choices, and a lot of topics to consider:
- Dependencies. You might not want jQuery, React, or similar.
- Support. Who is maintaining it? How soon are issues addressed?
- Extensibility. How easy is it for me to customize and add new features?
Of course you may choose to build your own instead. But how flexible is it? Can you reuse as-is in other places? What about other projects?
Enter the HTML dialog element! Published in HTML 5.2 (2018),
<dialog> is a native browser element for creating pop-ups and modals.