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

- URL: https://superails.com/posts/tailwind-on-rails-142-modals-with-html-dialog-element-tailwind-and-stimulus
- Published: 2023-08-16
- Duration: 13:10
- Access: free
- Topics: modals
- Playlists: Tailwind on Rails

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!

## Chapters

- 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!