HTML popover Attribute

By  on  

Modals have been an important part of websites for two decades. Stacking contents and using fetch to accomplish tasks are a great way to improve UX on both desktop and mobile. Unfortunately most developers don't know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute -- let's check it out!

The HTML

Creating a native HTML modal consists of using the popovertarget attribute as the trigger and the popover attribute, paired with an id, to identify the content element:

<!-- 
  "popovertarget" attribute will map to "id" of popover contents
-->
<button popovertarget="popover-contents">Open popover</button>
<div id="popover-contents" popover>This is the contents of the popover</div>

Upon clicking the button, the popover will open. The popover, however, will not have a traditional background layer color so we'll need to implement that on our own with some CSS magic.

The CSS

Styling the contents of the popover content is pretty standard but we can use the browser stylesheet selector's pseudo-selector to style 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. Traditionally that UI has been an element with opacity such to show the stacking relationship.

https://codepen.io/darkwing/pen/yLrqEvK

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    Select Dropdowns, MooTools, and CSS Print

    I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating...

  • By
    MooTools &#038; Printing &#8211; Creating a Links Table of Contents

    One detail we sometimes forget when considering print for websites is that the user cannot see the URLs of links when the page prints. While showing link URLs isn't always important, some websites could greatly benefit from doing so. This tutorial will show you...

Discussion

  1. I have com upon the popover element before and immediately I had a question: wouldn’t using a dialog element cover same use cases but with better styling, with the caveat that in the dialog case a little JavaScript is needed to show/hide the dialog in modal/non-modal behavior?

  2. Omar

    Im just glad you arent deceased and still posting :D

  3. Happiness

    I have com upon the popover element before and immediately I had a question: wouldn’t using a dialog element cover same use cases but with better styling, with the caveat that in the dialog case a little JavaScript is needed to show/hide the dialog in modal/non-modal behavior?

  4. niccord

    css’ backdrop part isn’t working on Firefox :(

    • keramzyt

      Is any workaround to this?

  5. How was I not aware of this attribute!?

    Very good write-up on this. Definitely opens doors for clearn and more semantic modal implementations.

    Did a little looking into it. It looks promising, but it’s still under development and may not be widely supported yet. Any suggestions on broader compatibility? Maybe a fallback option like Bootstrap or some other JS library?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!