• Modals are remote by default. This means you load a modal with a normal link or <a> tag, and the content is loaded from a remote url.

​
General Use

  • Create a new route for your modal content.
get "/account/info"  => "account#info", as: "my_path"
  • Then load the modal with a normal link or <a> tag.
<a href="<%= my_path %>">Open Modal</a>

Or using the link_to Rails Helper.

<%= link_to 'Open Modal', my_path %>

Finally, add a before_action to your controller to tell it to render in a modal.

before_action :renders_in_modal, only: :info

​
Slow Modals

If your modal loads fast, the above code is all you need. If it’s going to take more than half a second to load, it’s useful to show the loading skeleton when it’s clicked.

<a :click="modalOpen=true" href="<%= my_path(modal:true) >" >Show</a>

​
Pre Loaded Modals

Sometimes, you may want to load the modal content when the page itself loads. You can do this with content_for in your view.

<% content_for :modal_content do |content| %>
  Special Offer!
<% end %>

With the content loaded in, you could now, for example, show a modal popup 2 seconds after the page loads.

setTimeout(() => {
  MiniJS.window.modalOpen=true
}, "1000");

Sometimes you may want to include links or forms in a modal, where subsequent pages/states load into the same modal. All you have to do here is make sure the controller actions being linked to or submitted also have the renders_in_modal before_action.

​
Under The Hood

  • A hidden modal dialog div is loaded on every page. It’s hooked in to Mini Js, so showing it is as easy as setting modalOpen to true.

  • You can do this from the console with MiniJS.window.modalOpen=true, or you can use a Mini event on any element, like so.

<button :click="modalOpen=true">Show</button>

That said, the above method is mainly useful for debugging and is not the standard way to show a modal.

IconsToasts