TurboModal

Turbo Frame driven modal

Usage

Turbo modal provides helpers to add a basic scrim and modal target frame. These should be placed inside the body:

 <body>
    <%= scrim_tag %>
    <%= modal_tag %>
 </body>

Import turbo_modal styles

/* application.scss */

@import "~@katalyst-interactive/turbo-modal";

Import turbo_modal stimulus controllers

/* application.js */
import TurboModal from "@katalyst-interactive/turbo-modal"
application.load(TurboModal)

To get a modal displaying you will need 2 things:

A modal_link (or programmatic trigger)
Some modal_content

modal_link's are similar to a link_to in rails but it will point the path of the link to target the modal turbo frame. The resulting path will need to wrap some content in a modal_content helper tag.

eg:

<!-- app/views/homepage/index.html.erb -->
<%= modal_link "click to open modal", modal_path("example") %>

<!-- app/views/modals/show.html.erb -->
<%= modal_content do %>
 <div>
     <h1>Modal title</h1>
 </div>
<% end %>

Installation

Run these commands:

$ bundle add 'turbo_modal'
$ rails turbo_modal:install

rails turbo_modal:install will add the turbo_modal npm packages required. It also sets up stimulus and turbo packages.

License