Modal Element
The Modal Element creates a popup window that opens on top of the page when a visitor clicks a trigger. The modal itself stays hidden until then, so it does not take up any space in your layout, no matter where you place it on the page.
Use it for content that should be available without leaving the page: terms of a special offer, a short form, a product detail, a team member’s full profile or a video. The window has a heading, your content and an optional footer with a Close button.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Modal Element
Add the Modal Element anywhere on the page and give it a Name Of Modal, a unique lowercase name such as offer-terms. Enter the Modal Heading and fill the Contents of Modal with text, images or other content. Choose Size Of Modal: Small for short messages, Large for more content.
Then add the trigger. In a Button Element, enter the same name in Modal Window Anchor; for a plain text or image link, use the Modal Text / HTML Link Element with that name. Both must be on the same page as the modal. Style the window with Background Color and Border Color; the defaults come from the Modal section in Global Options.
Turn Show Footer off if you do not want the Close button at the bottom; the × in the top corner always stays. When the modal closes, videos and audio inside it are paused, and Google maps inside it are redrawn when it opens so they show at the correct size. On a dark background the close icon switches to a light color automatically.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Modal. Change them there to style every Modal at once.
General
| Heading | Description |
|---|---|
| Name Of Modal | Needs to be a unique identifier (lowercase), used for button or modal_text_link element to open the modal. for example mymodal. |
| Modal Heading | Heading text for the modal. |
| Size Of Modal | Select the modal window size. |
| Background Color | Controls the modal background color. |
| Border Color | Controls the modal border color. |
| Show Footer | Choose to show the modal footer with close button. |
| Contents of Modal | Add your content to be displayed in modal. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- The name must match exactly in the modal and in its trigger. Use lowercase letters and hyphens, and no spaces.
- Each modal needs its own name. Two modals with the same name would open together.
- The modal content is part of the page’s HTML even while it is hidden. Keep important page content on the page itself rather than only inside a modal.
- Always fill in the Modal Heading: screen readers announce it as the title of the dialog.
- Visitors close the modal with the cross, the footer button or a click outside the box.