A modal allows you to display additional content on a toujou page without requiring users to leave the page. The TYPO3 element modal appears like a pop-up window that shows the additional information. We have outlined the steps to set up a modal in toujou below.
Related topic: Text editing
In order to link to a modal window as described below, you need to have a content page already created that can be accessed in your page tree. See the tutorial for creating pages.
Mark link text
- Open the content element that contains the word or text passage you want to link.
- Select the text to be linked with the modal.
- Click on the link button above the editor mask. A new pop-up window will open.
- Click the selection box to the right of the target field and select Modal from the drop-down menu.
- The term "toujou-modal" will appear in the target field. Alternatively, you can enter "toujou-modal" directly in the field target.
- Then select the page you want to link to. You may need to expand the page tree to find the respective page.
Save the settings
- After clicking on the desired page, the pop-up window will close again. The linked text will be highlighted in color. To highlight the link, set link buttons.
- Save your changes.
Pieces of advice
toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website.
The modal in toujou does not display the content in the header area (i.e. header elements) of a page. Only the content located in the teaser area, content area and bottom area will appear.
If you want to open an image or video as a modal, it must be previously stored in your file list in the TYPO3 backend. The page title in the modal corresponds to the page title that is also shown in search engines. To edit the page title you have to go to the SEO tab in the page properties.
If you want to edit a link in the modal, you can easily change it by actualizing the respective page in the pop-up and then by clicking on update.
Worth noting: As the modal is referring to a page, the modal will appear in the results of a Google search or any other search engines as a page.