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!