Modals

Modals gather information, complete a subtask, or provide additional information without losing the context of an underlying page. Modal is a type of dialog that can be either non-modal (it’s still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).

Basic structure

<div id="modal-id" class="modal js-modal maxw40rem">
  <div class="modal-heading">
    <h3>Modal title</h3>
    <div class="js-toggle toggle js-modal-message-toggle modal-message-trigger active dn" data-toggle_target_id="feedback-form-message">
      <i class="fas fa-lg fa-exclamation-circle"></i>
    </div>
    <div class="js-modal-close">
      <i class="fas fa-times-circle fa-lg"></i>
    </div>
  </div>
  <div class="modal-message js-modal-message toggle-content js-toggle-content" data-toggle_id="feedback-form-message">
    <div class="modal-message__content js-modal-message__content"></div>
  </div>
  <div class="modal-body">
    <div class="modal-body__content">
      <p>Modal content</p>
    </div>
  </div>
</div>

Examples

To set a new modal, you need to create a new JS file containing triggers with listeners.

Basic modal

If you want to see a live example, open some person profile in the People module and click More actions > Private note. You will see a modal asking you for inserting the content of the private note. You can also click the following button to open the example of the modal:

Error modal

Usage

You may consider using a modal window when you need to:

• Grab the user’s attention: use when you want to interrupt a user’s current task to catch the user’s full attention to something more important.
• Need user input: use when you want to get information from the user. Ex. sign up or login form.
• Show additional information in context: use when you want to show additional information without losing the context of the parent page. Ex. showing larger images or videos.
• Show additional information (not in context): use when you want to show information that is not directly related to the parent page or other options that are “independent” from other pages. Ex. notifications.