#142 Modals with HTML dialog element, Tailwind and Stimulus

16/08/2023
modals

HTML dialog is the new standard for creating modals with less JS and CSS.

Is now supported by all browsers! 🌍

Dialog has some behaviours out of the box:
βœ… centered on page by default
βœ… disables background clicks when open
βœ… can be closed with native HTML (without extra JS)
βœ… includes CSS to blur/dim background by default
βœ… can be closed with Escape key

We will explore how to open the dialog modal with JS (Stimulus) and add additional styles and behaviours:
πŸ‘‰ Tailwind modal styling
πŸ‘‰ Background color and opacity
πŸ‘‰ Scroll modal
πŸ‘‰ Disable background scrolling
πŸ‘‰ Click outside to close

Episode source code: https://github.com/corsego/138-tailwind-layout/commit/f5a635631c492c594c7765b078908e1d52aad799
Based on this blogpost: https://blog.corsego.com/tailwindcss-dialog-modal

0:00 Dialog Modal demo
1:05 HTML dialog element
1:59 Separate buttons to close and submit dialog form
2:52 JS button to open modal
5:35 show VS showModal
6:10 prevent background scroll
7:04 close modal by clicking outside
9:25 modal background styles
10:17 scroll modal content
10:58 default modal width
11:45 blur background
12:26 dialog is much more than just semantic HTML!

0
Sign in to join the conversation