Modals

Modals are powered by Base Styles for styling, and Modals.js - which manages the html and exposes some javascript helper functions.

You can either load a modal from a url, or from a div (usually hidden) somewhere on the page.

To trigger a modal, simply call the launchModal() function from an onclick event or elsewhere.

Arguments

• url (optional): The page to load your modal content from.
• selector (optional): The id of the div to use for the modal content.
• id (optional): Give your modal an identifier if you need to manually call closeModal() later in the cycle.
• size: The size of the modal. Defaults to md
  • Options: xs, sm, md, lg, xl, 2xl

​

Trigger a modal from a url

<button class="ui-button" onclick="
  launchModal({ url: '<%= my_path %>'})">
</button>

<button class="ui-button" onclick="
  launchModal({ url: '<%= my_path %>'})">
</button>

class MyController 
  before_action :renders_in_modal, only: [:my_action]
end

​

Trigger a modal from a div on the page

<div id='modal-content' hidden> Content in Here </div>
<button class="ui-button" onclick="
  launchModal({ selector: '#modal-content'})">
</button>