DEV Community

Cover image for Modals in Hotwire, with zero JavaScript
Pete Hawkins
Pete Hawkins

Posted on • Updated on

Modals in Hotwire, with zero JavaScript

A quick run through of how to create modals in Rails using Hotwire. I didn’t need to write any javascript which is awesome!

The source code before and after is available on GitHub.


If you don’t want to watch the video, check below for how it works...

How it works?

  1. Add a turbo frame tag to your layout
  <%# app/views/layouts/application.html.erb %>
  <!DOCTYPE html>
  <html>
    <head>
      <!-- ... -->
    </head>

    <body>
      <!-- ... -->
      <%= yield %>
      <!-- ... -->

      <%= turbo_frame_tag "modal" %>
    </body>
  </html>
Enter fullscreen mode Exit fullscreen mode
  1. Change your links turbo_frame target
  <%# app/views/profiles/show.html.erb %>
  <!-- ... -->
  <%= link_to edit_profile_path(@profile), data: { turbo_frame: "modal" }, class: "..." do %>
    Edit profile
  <% end %>
  <!-- ... -->
Enter fullscreen mode Exit fullscreen mode
  1. Wrap your target views content in a turbo frame
  <%= turbo_frame_tag "modal" do %>
    <!-- Your modal content and styling -->
  <% end %>
Enter fullscreen mode Exit fullscreen mode

That’s the basics, watch the video to learn more and see it in action!

Discussion (4)

Collapse
ahmednadar profile image
Ahmed Nadar

Thanks Pete.
Clear and easy to understand. I like how it is easy to apply for an existing application.
Keep them coming...

Are you using Turbo in production project?

Collapse
phawk profile image
Pete Hawkins Author

Thanks for the kind words Ahmed!

I am using Turbo in production on several projects, happi.team is a Rails monorepo and uses turbo extensively.

Also whilst Nine.shopping’s storefronts/checkout are built as a Next.js app, when you login to create/manage your Store it’s a Rails app using Turbo.

Any Q's, let me know!

Collapse
phawk profile image
Pete Hawkins Author

I hope you find this series helpful, stay tuned for more content, and if you have any suggestions of things you would like to see built using Hotwire let me know!

Collapse
thibautbaissac profile image
ThibautBaissac

Thanks Pete!
You offer great quality content!!

How would you add animation between to turbo frames using animate.css ?