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