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