01 Getting Started

In this tutorial, we explore the essentials of Native Modals.

02 How to Add a Modal

1. Search for a modal in the element list and drag it into your web project.

Screenshot of the element menu showing how to insert a modal element

2. Alternatively, you can add a modal from the Pages tab in the Menu. Simply click on the Manage Menus Gear icon and navigate to the Modal option.

3. You can then click on the Add Modal button to add a modal to your project.

Screenshot showing how to navigate to the site menus through the pages dropdown

03 Modal Visibility

1. Ensure that your Layer List is active so that you can easily hide/show your modals whilst working on your web projects with the eye icon.

Screenshot of the layer list showing how to view and hide the modal

04 When to Use Modals?

Modals are great for when you want to show extra information popping up in a container.

05 Take a Closer Look at Native Modals

You can choose a title, or change the position and layout for a modal’s content under Modal Settings.

Screenshot of the Modal settings showing the content tab

For modal interactivity, you can hide the on-load action, and choose to show or hide the title and close icon.

1. The Hide Onload checkbox ensures that your modal is hidden when you load a webpage unless it is called by a button.

2. Selecting the Show Title checkbox will ensure the title of your modal is visible.

3. Use the Configure OnClose Action button to set up an action that runs whenever the modal is closed.

4. Use the Configure OnOpen Action button to set up an action that runs whenever the modal is triggered.

Screenshot of Modal Settings window displaying the Interactivity tab

You can control every aspect of styling for modals with Titan through the Modal Styling panel.

Screenshot of the modal styling window

You can also place multiple elements into a modal. The below modal has text, textarea, and email fields with a button.

Screenshot of example modal with added elements

06 To Show your Modal

1. Add an On Click Action to a button of your choice by selecting the Drawer/Modal interactivity.

Screenshot of Add Node window with drawer modal selected

2. Choose the Modal option from the side menu and ensure that the Enable toggle switch is on.

3. Select your modal and choose the Show radio button. Save and preview your project. When you click your button, your modal should appear.

Screenshot of Add Node Draw Modal window showing how to show the modal

07 To Reset your Modal

1. Add an On Click Action to a button of your choice by selecting the Drawer/Modal interactivity.

Screenshot of Add Node window with drawer modal node selected

2. Choose the Modal option from the side menu and ensure that the Enable toggle switch is on.

3. Select your modal and choose the Reset State radio button. Save and preview your project. When you click your button, your modal should reset its state.

Screenshot of add node drawer modal window showing how to reset the modal

08 To Close your Modal

1. Add an On Click Action to a button of your choice by selecting the Drawer/Modal interactivity.

Screenshot of the Add Node window with the Drawer Modal node selected

2. Choose the Modal option from the side menu and ensure that the Enable toggle switch is on.

3. Select your modal and choose the Hide radio button.

Screenshot of Add Node Drawer modal configuration showing how to hide the modal

Save and preview your project. When you click your button, your modal should disappear.

09 A Note on Actions

Keep in mind that you can run all actions when you close a modal.

10 Got Feedback?

Additional Resources