Wednesday, April 17, 2024
HomeSoftware DevelopmentHTML popover Attribute

HTML popover Attribute


Modals have been an vital a part of web sites for twenty years. Stacking contents and utilizing fetch to perform duties are a good way to enhance UX on each desktop and cell. Sadly most builders do not know that the HTML and JavaScript specs have carried out 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:

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

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

The CSS

Styling the contents of the popover content material is fairly normal however we are able to use the browser stylesheet selector’s pseudo-selector to model 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 point out the stacking relationship.

  • CSS @supports

    Function detection by way of JavaScript is a shopper aspect greatest observe and for all the appropriate causes, however sadly that very same performance hasn’t been obtainable inside CSS.  What we find yourself doing is repeating the identical properties a number of occasions with every browser prefix.  Yuck.  One other factor we…

  • Page Visibility API

    One occasion that is all the time been missing throughout the doc is a sign for when the person is taking a look at a given tab, or one other tab. When does the person change off our website to take a look at one thing else? When do they arrive again?

  • JavaScript Battery API
  • Save Web Form Content Using Control + S

    We have all used phrase processing purposes like Microsoft Phrase and if there’s one factor they’ve taught you it is that you want to save each few seconds in anticipation of the inevitable crash. WordPress has mimicked this performance inside their WYSIWYG editor and I exploit it…


RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments