Tailwind on Rails #142 Modals with HTML dialog element, Tailwind and Stimulus
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
Featured in playlists
Stop copypasting CSS and Javascript UI elements!
Learn to write your own!
Really, there are like 50 classes that you need to remember and you're set for life!