The standard Modal object is primarily used for Submissions, but is also used for every modal in the application. Custom modals should be created with the App.Interface.Modal.new method.
App.Interface.Modal.new(title, body, actions = {}, options = {})
Title & Body
The title and body parameters should be strings of text. Pass the option safe: false to add HTML to titles and bodies.
Actions
The actions parameter is optional, and refers to the buttons at the bottom of the modal. If it's not given, an "OK" button will be added to close the modal. Actions should be given as an array of objects, and accept the following format.
[
{
text: "OK",
type: "primary",
callback: function(event, modal) { ... }
},
{
text: "Cancel",
type: "secondary",
callback: function(event, modal) { ... }
}
{
text: "Delete",
type: "tertiary",
callback: function(event, modal) { ... }
}
]
The text appears as the button's text, and the callback is called when the button is clicked. Using the default theme, primary buttons are right-aligned with a teal background, secondary buttons are right-aligned with no background, and tertiary buttons are left-aligned with no background.
Options
The options parameter is optional. If given, it should be an object with the following options.
{
size: "x-small",
id: "modal_element_id",
visible: true
}
With the exception of id, which is by default randomly generated, the options above are the default values for modal options.
- size — A string from the options x-small, small, medium, large, x-large, indicating the size of the modal.
- id — The ID of the modal's containing HTML element.
- visible — A boolean indicating whether the modal should be visible by default. Use the modal functions show and hide to change visibility later.