Modal popups are a great way to organize and display important or "extra" information, without cluttering up the content on your page.
Modals from Instrumental Components include extensive customization options, including the ability to display static content, a video player, and more.
rails g instrumental:modalsTo insert a component into a view:
rails g instrumental:modals:insertIn order for a modal to work on a page, you'll need to add the modal Stimulus controller to your page body. Edit the body tag in your layout(s) to have at least this:
<body data-controller="components--modal">
...
</body>You will also need to include the modal partial in your layout. It's hidden by default.
<%= render "shared/components/modals/modal", id: "my-modal" do %>
I'm a modal!
<% end %>And include a button to trigger the launch of your modal:
<%= button_to "Launch Modal", "#",
data: {
action: "click->components--modal#launch",
modal_id: "my-modal"
} %>Showing an embedded video (like a YouTube video) in your modal? Nothing's worse than closing the modal but your video is still playing in the background!
With Instrumental modals, you won't have this problem. They come pre-configured to automatically stop video playback when the modal is closed. No extra configuration required!
The Stimulus JS controller (modal_controller.js) that controls your modal detects whether its' contents includes a video tag or iframe and automatically stops video playback when the modal is closed.
Find all of your customization options (via local variables) in this file:
app/views/shared/components/_modal.html.erb
I created Instrumental Components to make designing and building professional apps with Ruby on Rails easy, fast, and fun. I use it on all of my projects and I hope it helps you build something great.
