Create a Modal

Business Background

Use Modals to create web page elements that pop up in front of the main body of content. Users must engage with the modals by interacting with them to return to the main content. Modals draw user attention and highlight important information.

How to Video

  • 0:02 Introduction to Modals.
  • 0:12 We show you how to add a Modal from the Pages drop-down.
  • 0:27 Learn how to customize Modals.
  • 1:29 Discover more about adding buttons to Modals.
  • 1:46 Preview how the Modal displays to users.

How to Guide

Add and configure a modal that displays to users when interacting with input fields.

Note:

Click here for the best practices for working with modals.

  1. Navigate to Titan Web Application.
  2. Click the expand (+) button next to the settings icon. A list of elements will show.
  3. Select the Containers option from the list.
  4. Drag-and-drop the Modal element to the canvas.
Modal
Modal
  1. Customize the following:
  2. Activate the modal as follows:
    • Add an element, for instance, a button. In this example, the modal will be activated when the user clicks on this button, depending on the action you set.
  3. Click the On Click Action icon.
On Click Action icon
On Click Action icon
  1. Click the + icon. The Add Node screen opens.
+ icon
+ icon
  1. Under Layout Actions, click the Drawer/Modal option. The Add Node/Drawer/Modal screen opens.
Add Node screen
Add Node screen
  1. Click the Modal option on the left of the screen.
  2. Use the toggle switch to enable the modal.
  3. Select the modal from the drop-down list.
  4. Use the radio buttons to select an action.
    • Show: Use this option to show the modal.
    • Hide: Use this option to hide the modal.
    • Toggle: Use this option to toggle the modal. If it was shown, it would be hidden or vice versa.
    • Reset State: Use this option to reset the modal. All input fields will be cleared, and the modal will return to the default settings.
    • Custom Title: add a dynamic custom title to the modal.
Add Node/Drawer/Modal screen
Add Node/Drawer/Modal screen
  1. Add a tag, if necessary, and click the Insert button. The modal is added to the On Click Action screen.
Modal added
Modal added
  1. Click the Apply button.

The action will be applied to the custom modal, and the content will be shown.

Hidden Title

Need more help?