Native Modal (8 min)
Completion requirements
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.
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.
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.
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.
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.
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.
You can control every aspect of styling for modals with Titan through the Modal Styling panel.
You can also place multiple elements into a modal. The below modal has text, textarea, and email fields with a button.
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.
You can control every aspect of styling for modals with Titan through the Modal Styling panel.
You can also place multiple elements into a modal. The below modal has text, textarea, and email fields with a button.
06 To Show your Modal
1. Add an On Click Action to a button of your choice by selecting the Drawer/Modal interactivity.
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.
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.
07 To Reset your Modal
1. Add an On Click Action to a button of your choice by selecting the Drawer/Modal interactivity.
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.
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.
08 To Close your Modal
1. Add an On Click Action to a button of your choice by selecting the Drawer/Modal interactivity.
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.
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.
09 A Note on Actions
Keep in mind that you can run all actions when you close a modal.