DEV Community

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

Posted on • Edited on

15 7

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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (5)

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

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

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
 
chazelton331 profile image
Cliff Hazelton

This is great, short and sweet. Thanks!

Collapse
 
thibautbaissac profile image
ThibautBaissac

Thanks Pete!
You offer great quality content!!

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay