Exploring the native Popover and Dialogs APIs

In this livestream, we'll do a deep dive into the newer Popover API and dialog element and how we can use them in our @Webflow projects to create native and accessible popups and modals!

-----------------------------------------------

// TIMESTAMPS

0:00 Intro & pre-show chit-chat
5:55 Dialog & Popover overview
12:00 Webflow project set up for Dialog
17:37 Open/Close toggle for non-modal
19:47 Modal experience
24:35 Closing dialogs with a form
31:05 CSS backdrop
33:18 Autofocus
35:20 Animating
40:10 Popover API
53:14 Light dismiss & Esc key to close
54:14 popovertargetaction
58:12 JS & CSS for popovers
01:02:39 Outro

-----------------------------------------------

// RESOURCES FROM THE VIDEO

Webflow - https://finsweet.info/webflow
Popover API - https://developer.mozilla.org/en-US/d...
The Dialog Element - https://developer.mozilla.org/en-US/d...

Finsweet.com - https://www.finsweet.com/
Finsweet merch store - https://finsweet.com/merch
Signup to Finsweet+ - https://finsweet.com/plus
Subscribe to Finsweet YouTube - https://www.youtube.com/c/Finsweet?su...

-----------------------------------------------

// ABOUT US

We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!

🙌 Join our community - https://finsweet.com/plus
🔥 Add superpowers to your Webflow website - https://finsweet.com/attributes
🧰 Extend your Webflow workflow - https://finsweet.com/extension
🚀 Build clear, scalable & organized Webflow websites - https://www.finsweet.com/client-first
👀 Check out products used at Finsweet - https://www.finsweet.com/recommended
🛍️ Buy Finsweet merch - https://finsweet.com/merch

-----------------------------------------------

// SOCIAL

Podcast: https://anchor.fm/finsweet
Twitter:   / finsweet  
Instagram:   / finsweet  
Facebook:   / thatsfinsweet  
Dribbble: https://dribbble.com/thatsfinsweet
Behance: https://www.behance.net/thatsfinsweet/
Webflow: https://webflow.com/team/Finsweet/

-----------------------------------------------

// TAGS

#popover #api #webflow

-----------------------------------------------

Thanks for your support! 🤟