01 Getting Started

This tutorial will explore working with two types of modals in Titan Web:
  • Titan Web Native Modals 
  • Custom Modals

02 Native Modals

1. Drag and drop a modal from the Elements list.

Screenshot of the element menu showing how to insert a modal

2. Alternatively you can find modals under the Pages tab.

3. Choose the Manage Menus and Modal option before clicking the Add Modal button.

Screenshot showing how to navigate to the site menus

4. Make sure to open your Layer List by clicking on View and selecting Show Layer List.

Screenshot displaying how to display the layer list

5. To rename your modal, right-click on your element in the Layer List and choose Rename.

Screenshot of the Layer List displaying how to rename a Modal

6. Type out the new name of your modal in the Tag Name field and click the pink check button to save.

Screenshot of the Tag Name window displaying how to rename a modal

03 To Hide 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 Hide radio button. Save and preview your project. When you click your button, your modal should disappear.

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

04 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 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 Show radio button.

Screenshot of Add Node Drawer and Modal configuration window

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

05 Custom Modals

Custom modals are usually pages in your web project.

Simple Show/Hide Interactivity for Custom Modals 

06 To Show your Custom Modal

1. Add an On Click Action to a button of your choice by selecting the Redirect/ Go to Page interactivity.

Screenshot of Add Node window with Go To Page node selected

2. Choose the Internal option from the side menu and select the Project Page to which you would like to redirect.

3. Use the Open In dropdown to select the Modal option. 

4. Remember to set the Parameters for the modal as well.

Screenshot of Add Node Redirect Configuration for Internal Go to Page settings

Save and preview your project. When you click your button, you should be directed to your assigned web page.

07 To Hide your Custom Modal

1. Add an On Click Action to a button of your choice by selecting the Page Actions interactivity.

Screenshot of the Add Node screen with the Page Actions node selected

2. Choose the Close Modal option from the side menu and ensure that the Enable checkbox is ticked.

Screenshot of the Add Node page Actions Config for Close Modal

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

08 Titan’s Takeaway

When you want to do quick actions, use Native Modals, which are fast in controlling variables between web pages. Native Modals can see all variables, whereas Custom Modals cannot since they exist on a different web page. Whenever you need more control of the layout or need to perform more complex actions, then choose our Custom Modal options.

09 Got Feedback?

Additional Resources