#151 Advanced Hotwire modals

15/11/2023
hotwire turbo frames modals html dialog
  • Turbo Dialog Modals demo
  • Copy HTML Dialog form Ep 142
  • Turbo Frame within modal
  • Navigation within modal
  • Close modal after create
  • Add new comment to the list
  • Clean up modal after close
  • Edit, Show, Destroy within modal
  • Perfect Turbo Modals: Final demo

63 + 142 = 151. Why?

In Ep 63 we learnt to build modals with Hotwire.
In Ep 142 we learnt to use the native HTML dialog element
Now let's combine them to create the perfect modal!

We will dive deep into navigating within a Turbo Frame and breaking out of it when needed.
We will render updates without page refresh on the background with Turbo Streams.
We will add a tiny bit of StimulusJS to control the modal.

We get to play with the whole Hotwire stack for this advanced behaviour!
I am really proud of this episode.

Episode source code: https://github.com/corsego/151-dialog-turbo-modals/commit/8864d6aab49ccdeada8cfa43bdf1208f3fe777af
Based on this blogpost: https://blog.corsego.com/turbo-modal-dialog

0:00 Turbo Dialog Modals demo
1:48 Copy HTML Dialog form Ep 142
3:13 Turbo Frame within modal
7:00 Navigation within modal
8:50 Close modal after create
12:40 Add new comment to the list
14:20 Clean up modal after close
17:01 Edit, Show, Destroy within modal
20:44 Perfect Turbo Modals: Final demo

0
Join the conversation
Sign in to access PRO lessons, access private repos, leave comments, create watch lists.
We collect your email address, name and username to create your account. We do not share your email address with anyone else.