Turbo Frame Modals (Popups) | Ruby On Rails 7 Tutorial

Let's take a look at creating popups using turbo frames. This tutorial lets us create modals in our Ruby on Rails 7 apps with ease!
Checkout my course(s) at: learn.deanin.com
Source:
github.com/Deanout/turbo_fram...
Join this channel to help support these videos:
/ @deanin
Follow me on social media:
linktr.ee/deanin
If you liked this video, please consider subscribing: t.co/RZ4EwP0F2a
#Deanin #Software #Programming

[@Deanin]

This is one of those tutorials that I made for myself in a month when I forget how to do this, but I really want to make a modal real quick lol. I have a twitch that I'm debating using soon, so please follow it 👀www.twitch.tv/deanout

[@carltanner3632]

Thanks for this Dean. This tutorial about turbo frame modals is super helpful. I appreciate that you keep it basic and mention how id could be used to show the details of the show page.

[@cvaldivia83]

Thank you so much for the tutorial, so easy to follow and so helpful

[@aynurshauerman]

Thank you, it is very useful!

[@azizdevfull]

very helpful : )

[@stpaquet]

Very interesting as usual. You could have added a section about using turbo_frame_request? in the controller to prevent users from accessing the /posts/new or /posts/edit as the UI is now a popup.

[@yuanweizhou935]

Can you create a modal pop up for delete confirmation as well?

[@DillonWreek]

Great stuff. What if you would like to pass a variable to the modal? Like: you have a form that on submission sends a post to the create action, how can the create action show and pass a @variable to the modal?

[@GlaylsonAlves]

Exactly what I was looking for, just need to tweak for bootstrap. Thanks

[@volkanbeyoglu235]

did u find a solution for Bootstrap? I am having trouble to display the form inside the modal.

[@ViktorSchmidt]

Great ❣️

[@volkanbeyoglu235]

Hello. Thank you. Can you show us how to implement this with Bootstrap modal and with the buttons in the modal footer? Thank you

[@AbdulHannan-sj2xi]

How can we change the background page to dull or change its opacity as bootstrap modal doing.

[@moviekapsula]

good bro

[@gauravrewaliya3269]

What can i do i click on new post , create new post then current page ,modal popup turbo_frame give Content missing Insted of reloading any hint

[@carltanner3632]

BTW, I asked chatGPT how to create a modal with Turbo, and the response was a bit more complicated.

[@btrewern]

Hi, just an fyi, this does not work with the current version of Turbo. It seems you need to add "data: { turbo_frame: '_top' }" to the form_with call. I have been banging my head against a wall for a couple of days so thought I would share this.

[@MrJuanPuerto]

Can you please explain a bit better this? i cannot get it to work

[@haroldpepete]

you should put tha base model in a partial to reuse its functionality

[@xiaohuizhang7004]

how about making a nested modal? wait your next video

[@JohanDonadoBanderas]

You would have to show the behavior when new Post is created. It behaves strange.

[@cyph2082]

Yep and a submission, that could not be validated closes the modal immediately and the user cannot see any error messages.