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.
Responsive and Infinitely Scalable JS Animations
Back in late 2012 it was not easy to find open source projects using
requestAnimationFrame()
– this is the hook that allows Javascript code to synchronize with a web browser’s native paint loop. Animations using this method can run at 60 fps and deliver fantastic…
CSS Vertical Center with Flexbox
I’m 31 years old and feel like I’ve been in the web development game for centuries. We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior. Whether it turns out that way remains to be seen but flexbox does easily…