Modals in Hotwire, with zero JavaScript

#rails #hotwire #tutorial #webdev

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?

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>

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 %>
  <!-- ... -->

Wrap your target views content in a turbo frame

  <%= turbo_frame_tag "modal" do %>
    <!-- Your modal content and styling -->
  <% end %>

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

Top comments (5)

Ahmed Nadar • Oct 8 '21

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?

Pete Hawkins • Oct 8 '21

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!

Pete Hawkins • Oct 2 '21

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!