Create a Responsive Modal

Business Background

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

Titan Solution

  • Add and configure a responsive modal that displays on different screen sizes and devices. You can position the elements anywhere you want and in different positions for different device layouts.
  • The responsive modal gives you more freedom to customize the modal.

You can position the elements anywhere in a responsive modal, whereas the elements are automatically fitted in a modal.

This image has an empty alt attribute; its file name is image-55.png

How to Video

  • Coming soon!

How to Guide


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 Responsive Modal element to the canvas.
Responsive Modal
Responsive Modal
  1. Click the + icon to add another strip to the modal.
  2. Use the handle to drag the responsive modal bigger.
Drag responsive modal
Drag responsive 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?