June 25, 2023
A Guide to Creating Popups
How to choose the right approach when developing a web application.
By Ross Robinojavascript / html / css
This article outlines various techniques that developers can employ to create accessible popups using HTML, CSS, and JavaScript.
I’m going to refer to modals, popovers, and dialogs as popups. Generally, it’s best to avoid popups altogether–they can be obtrustive, especially when they aren’t accessible. Popups can be used when an application needs to alert a message, obtain confirmation, or prompt the user for input. If these cases sound familiar, they are!
The window object has three methods to perform these actions: alert, confirm, and prompt. Using any of these three methods makes it easy to ensure the user is always provided with an accessible popup catered to their device, whether it be mobile, desktop, or AR/VR.
If a custom user interface is not needed, developers can utilize the web platform with these methods and provide users with a familiar experience.
The confirm method returns a boolean. It displays a popup with buttons to cancel or confirm.
The prompt method returns a string or null. It displays a popup with an input field for the user to enter text.
These methods have a few advantages over creating your UI elements.
So what if you have a design system you need to follow, or need some other content besides text and a text input inside your popup? You can always create a component with just a <div> and CSS, but there are a couple of happy paths to accomplish this using built-in HTML elements and attributes. These make it easier to provide an accessible experience across devices.
The HTML <dialog> element, is supported across all major browsers. Dialogs are best used if the user is required to take an action before proceeding. For example, an “Are you sure you want to delete this record?” confirmation would be a use case for a dialog.
The HTMLDialogElement JavaScript object comes with a couple of useful methods, showModal can be used to show the dialog, while close is used to hide it.
Another way to close the dialog is to add method="dialog" to a <form> or formmethod="dialog" to a <button> that is contained within the <dialog> element.
There is also an open HTML attribute that can be utilized to control the visibility of the element. Add it to the <dialog> element to make it open by default on page load.
Finally, there is also a zero-JavaScript solution–the Popover API. Right now this API and the associated HTML attributes are only supported in Chrome. Popovers are a bit less intrusive than the previous solutions. For example, perhaps a banner stating “Your progress has been saved.”, would be a good case for a popover.
The popover and popovertarget attributes are used on two separate elements. The target element is the popup. It needs to have the popover attribute to designate it as a popover, and then an id attribute to identify the element. popovertarget is used on the controls element (for example, a <button> or <input type="button">) and set to the same id as the target.
The popovertargetaction attribute can also be used to specify the controls, this defaults to toggle, but can also be set to hide or show if separate functions are required.
Using these three attributes you can create a popup without JavaScript.
You can also programmatically display the popover with three new HTMLElement methods: hidePopover, showPopover and togglePopover.
In conclusion, there are multiple options for creating popups using HTML, CSS, and JavaScript. However, it is generally best to avoid popups altogether due in favor of more reliable UI elements. Dialogs and popovers allow for more customization and flexibility and help ensure content is accessible by providing useful defaults. It is important to consider the advantages and disadvantages of each method and choose the one that best suits the specific use case while prioritizing accessibility.
Thanks for reading!…