Tailwind on Rails #142 Modals with HTML dialog element, Tailwind and Stimulus

16/08/2023 (8 months ago)

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!

Sign in to join the conversation