Best approach for using turbo frames as pop-ups

1

What is the best approach to do pop-ups with turbo frames?

I’ve currently created a turbo container with the ID ‘popup’. When you click a button, that request returns a response containing a turbo container rendering inside the popup. When you click button 2, the contents from request 2 is rendered inside the popup.

However, what is the best approach to hide and show the popup? Ideally, when you click the button, the popup will animate in (using css) and the container loads. When loading, a loading indicator should be shown.

What is the easiest way to do this? Simply create a 2nd click handler on the button that will trigger the popup to show? Or are there better approaches to doing this?

2

Hmm… this might be a bit tricky, but you could use a lazy frame and use CSS checking for the busy property of a turbo frame?

Havn’t tried this yet, just thought it might work

1 Like
3

@georgeboot See: Routing in a modal interface - #13 by daniele and Injector controller: pattern for modals - #8 by wdiechmann and Presenting forms in modals with Turbo

Personally, I do popups/modals without turbo-frames and instead with turbo-streams because that approach offers more flexibility and less hacks (for now). But in the links above others have went with frames.

2 Likes