HTML popover Attribute

Modals have been an necessary a part of web sites for twenty years. Stacking contents and utilizing fetch to perform duties are an effective way to enhance UX on each desktop and cellular. Sadly most builders do not know that the HTML and JavaScript specs have applied a local modal system by way of the popover attribute — let’s test it out!

The HTML

Making a native HTML modal consists of utilizing the popovertarget attribute because the set off and the popover attribute, paired with an id, to determine the content material ingredient:

Open popover
That is the contents of the popover

Upon clicking the button, the popover will open. The popover, nonetheless, is not going to have a standard background layer coloration so we’ll have to implement that on our personal with some CSS magic.

The CSS

Styling the contents of the popover content material is fairly commonplace however we will use the browser stylesheet selector’s pseudo-selector to type the “background” of the modal:

/* contents of the popover */
[popover] {
  background: lightblue;
  padding: 20px;
}

/* the dialog's "modal" background */
[popover]:-internal-popover-in-top-layer::backdrop {
  background: rgba(0, 0, 0, .5);  
}

:-internal-popover-in-top-layer::backdrop represents the “background” of the modal. Historically that UI has been a component with opacity such to indicate the stacking relationship.