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.
I’m an Impostor
This is the hardest thing I’ve ever had to write, much less admit to myself. I’ve written resignation letters from jobs I’ve loved, I’ve ended relationships, I’ve failed at a host of tasks, and let myself down in my life. All of those feelings were very…
Regular Expressions for the Rest of Us
Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In…
Create Spinning, Fading Icons with CSS3 and MooTools
A goal of my latest blog redesign was to practice what I preached a bit more; add a bit more subtle flair. One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.) I…
Animated AJAX Record Deletion Using jQuery
I’m a huge fan of WordPress’ method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here’s how to achieve that functionality with jQuery JavaScript. The PHP – Content & Header The following snippet goes at the…
Source link