code • HTML popover dialog modals - martindubenet/wed-dev-design GitHub Wiki

Popover is an HTML attribute (popover, popovertarget and optionally popovertargetaction on a form <input type="button">) that can be applied on different Ui (aria) elements such as menu, listbox, tree, grid, and dialog. It relies on some reserved HTML properties and CSS pseudo-classes to style it.

Some examples below are based on this 1hr Youtube tutorial about modern CSS published in November 2024 about this Github project.

<button type="button" popovertarget="lightbox">Open lightbox<button>
<figure id="lightbox" class="modal" popover></figure>

::backdrop { /* the shadow layer behind the popover modal */ }
:popover-open { /* style popover content when in active mode */ }

Read more about Popover API.

Real life usage :

• Popover positionning is ideal for displaying Alert Message or Help or 🛈 Info in a corner of the viewport.
• Nested popovers is ideal for Navigation Menu.
• Popover hints is ideal pour Tootltips.

The <dialog> is an HTML element that is a type of popover with the design particularity of always been centered position to the viewport and isolating interaction to the inner dialog contents. Any click event out of the dialog is closing it.

<button type="button" role="button" aria-haspopup="dialog" popovertarget="DialogExample">Show dialog<button>
<dialog id="DialogExample" class="modal" aria-modal="true" popover>
 <header>
   <h1>Dialog title</h1>
   <button type="button" role="button" aria-label="Close this window" autofocus>&otimes;</button>
 </header>
 <p>Lorem ipsum paragraph</p>
</dialog>

Read more about Clarifying the relationship between Popovers and Dialogs or technical reference about Creating a modal dialog.