Popover content
This is the content you want the user to see!
Modal (a.k.a. popover) boxes have been an important element of user web design from the beginning. Whether including special instructions, images, or annoying popup ads, it used to take a complex bit of coding to include a simple box that appears on demand.
The HTML popover tag takes most of the work out of applying the functionality so designers can concentrate on content and styling instead of writing complex code.
For more detailed information on applying popovers, including placement, limitations, and best practices, see the
MDN Popover API.
Creating an HTML popover modal at its most simple, consists of using the popovertarget attribute as the trigger and the popover attribute (paired with an id) to identify the content element.
One of the advantages to using a popover instead of the usual modal box is that the user can still interact with the rest of the page. With classic modals, the modal must be closed before any other interaction is possible.
Here's an important consideration: provide the user with some obvious way to close the popup once they're done with it!
<!-- "popovertarget" attribute will map to "id" of popover content -->
<button popovertarget="popover-content">Open popover</button>
<div id="popover-content" popover>This is the content of the popover box</div>
Almost any styles can be applied, with several exceptions (including absolute positioning). The user's browser will determine where the popover box appears.
/* contents of the popover */
[popover] {
background: green;
padding: 20px 40px;
/* ...more styles as needed */
}
/* the popover's "modal" background */
[popover]:-internal-popover-in-top-layer::backdrop {
background: rgba(0, 0, 0, .5);
}