Pop Up, Pop Down, PopOver: Using the new PopOver API

A new API is now available for creating pop ups and modal windows. It’s called the popover API and lets you create a pop up with just HTML. It’s dead simple (or should that be undead simple?).

First, create an element that will be your pop up. Give it an id attribute and a boolean popover attribute.

<div popover id="warning">
    <p>The Zombies are coming!</p>
</div>Code language: HTML, XML (xml)

Next, you need something to trigger the pop up. Set this using the popovertarget attribute and the id you set on your popover element.

<button popovertarget="warning">Warn Everyone</button>Code language: HTML, XML (xml)

Voila, you have a working pop up

By default you can click on the same button (or anywhere outside the pop up) to close it. You can also have dedicated buttons for opening and closing the popover using the popovertargetaction attribute. Valid values are show, hide, and toggle (the default).

<button popovertarget="warning" popovertargetaction="show">Warn Everyone</button>Code language: HTML, XML (xml)

The popover API can kick some zombie butt with a CSS pseudo element too!  ::backdrop lets you style what’s under the pop up, allowing you to change its color, set partial opacity, or otherwise style it.

::backdrop {
   background-color: rgba(0,0,0, 0.5);
}Code language: CSS (css)

The API also comes with a pseudo-class :popover-open. It gives you a handle for changing all open popover elements, even if they use different elements to create pop ups.

:popover-open {
   background-color: lightblue;
   border: none;
   border-radius: 1em;
   padding: 0 1em;
}Code language: CSS (css)

And for the full trifecta, there’s a whole JavaScript interface too. We’ll look at that in Part 2.