Custom Page Modal (6 min)
Completion requirements
01 Getting Started
In this tutorial, we explore custom modals in Titan Web. Custom modals are great to use when you need to heavily customize your web page. A custom modal could be any page within Titan or any external page either from another Titan application or a completely external site.
02 How to Open a Modal From an Action
This tutorial aims to show a modal whenever a button is clicked. We will use a full template page as our modal.
1. Click on the Pages tab and then Add New Page.
2. Select a page from the Templates list and then click the Add to Project button.
3. Navigate back to your Home page and add a Button.
4. Click on the Interactivity settings and then set up an action for your button.
5. Click on the + icon and select Redirect/ Go to Page as an action.
6. Choose whether you would like your button to navigate to an external or internal site.
7. Select the Redirect URL and choose the web page you want to go to. Open in is where we choose to open this page as a modal.
8. Configure your parameter settings.
Save your project and preview your button’s actions. When you click on your button, it should take you to your new page.
1. Click on the Pages tab and then Add New Page.
2. Select a page from the Templates list and then click the Add to Project button.
3. Navigate back to your Home page and add a Button.
4. Click on the Interactivity settings and then set up an action for your button.
5. Click on the + icon and select Redirect/ Go to Page as an action.
6. Choose whether you would like your button to navigate to an external or internal site.
7. Select the Redirect URL and choose the web page you want to go to. Open in is where we choose to open this page as a modal.
8. Configure your parameter settings.
Save your project and preview your button’s actions. When you click on your button, it should take you to your new page.
03 How to Close a Modal From an Action
This tutorial aims to close a modal whenever a button is clicked. We will use a full template page as our modal.
1. Select an element from your template. For this demo, we have chosen the Read More button.
2. Click on the interactivity settings to set up an action.
3. Choose Page Actions.
4. Select the Close Modal option in the side menu. Make sure to mark the Enable and Enable Set Parent Parameters checkboxes when passing the parameters before clicking on Next to complete the setup.
5. Save and preview your project.
The Read More button should now close the template page when you click it.
1. Select an element from your template. For this demo, we have chosen the Read More button.
2. Click on the interactivity settings to set up an action.
3. Choose Page Actions.
4. Select the Close Modal option in the side menu. Make sure to mark the Enable and Enable Set Parent Parameters checkboxes when passing the parameters before clicking on Next to complete the setup.
5. Save and preview your project.
The Read More button should now close the template page when you click it.