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

This Microsoft Entra ID Vulnerability Could Have Been Catastrophic

As businesses around the world have shifted their digital infrastructure over the last decade from self-hosted servers to...

Genre-Bending ‘Baroque YA’ Collection Headed To Switch In Japan

Japanese dev outfit Sting has just announced Baroque YA, a collection of four games from the genre-spanning series,...

GOLD SALEM’s Warlock operation joins busy ransomware landscape – Sophos News

Counter Threat Unit™ (CTU) researchers are monitoring a threat group that refers to itself as Warlock Group. The...

When to Trust AI Tech Answers (And When to Call Us)

Recently, we’ve fielded a spate of questions from people who have used an AI chatbot to help with...