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>

​
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>