HTML popover Attribute

Date:

Share post:

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:



This is the contents of the popover

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

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
  • Introducing MooTools Templated

    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn’t a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven…

  • CSS Filters

    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let’s have…

  • jQuery Random Link Color Animations

    jQuery Random Link Color Animations

    We all know that we can set a link’s :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color. The…

  • Create a Simple Slideshow Using MooTools, Part III: Creating a Class

Source link
spot_img

Related articles

Anomaly detection betrayed us, so we gave it a new job – Sophos News

At this year’s Black Hat USA conference, Sophos Senior Data Scientists Ben Gelman and Sean Bergeron will give...

Massive DRAM Price Increase in 2025

Introduction: What’s Happening in 2025? The memory market is about to undergo significant changes, and the message is clear...

Advancing agentic AI development with Firebase Studio

At Google Cloud Summit London, we shared how Google Cloud is transforming development with...