#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
![#138 Responsive Layout with Sidebar and Navbar](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg5MCwicHVyIjoiYmxvYl9pZCJ9fQ==--20f38afc454180eb5a08327b9629d846e64c1849/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#139 Advanced Navbar Dropdown Menu](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTkwMCwicHVyIjoiYmxvYl9pZCJ9fQ==--cd4b7cf897374899e30004392d15c095c38f9999/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#140 Click outside to close Menu with Stimulus-Use](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1OCwicHVyIjoiYmxvYl9pZCJ9fQ==--7ca40fc28c88f131fd3eb23fbe0b8c8518c3c577/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
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!
Recommended based on what you are watching now
![#3: Notifications, Devise Confirmable, AWS SES, LetterOpener](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTkyMSwicHVyIjoiYmxvYl9pZCJ9fQ==--05ab607607c8a281c2e8c65d3a1c7b44df84e890/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
#3: Notifications, Devise Confirmable, AWS SES, LetterOpener
![#178 NEW Rails 8 Authentication Generator](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MjMwNiwicHVyIjoiYmxvYl9pZCJ9fQ==--031e623f1d7d51c584fbc457e3ac5b737cf4b1ac/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--34e5c9bac0ea93c87a890e274478a7e6bd659b29/178.png)