Modal Text / HTML Link Element
The Modal Text / HTML Link Element opens a modal window from a simple link. It is the trigger for the Modal Element when a button would be too prominent, for example a small “Read the terms” link under a price or a short line of text below a product description.
The link does not have to be text. Anything you can write as HTML works as the trigger, such as an image, an icon or a short sentence with formatting, so you can open a modal by clicking a team photo or a product picture.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Modal Text / HTML Link Element
First add a Modal Element to the page and give it a Name Of Modal. Then add the Modal Text / HTML Link Element where the link should appear and enter exactly the same name in its Name Of Modal field.
Write the clickable content in Text or HTML code. Plain text becomes a text link; HTML such as an image tag becomes a clickable image. The link follows the link colors of your site, and you can style it further through CSS Class or CSS ID.
When a visitor clicks the link, the matching modal opens on top of the page and the page itself does not jump or reload. The link has no design options of its own, because it takes over whatever you write in its content.
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.
General
| Heading | Description |
|---|---|
| Name Of Modal | Unique identifier of the modal to open on click. |
| Text or HTML code | Insert text or HTML code here (e.g: HTML for image). This content will be used to trigger the modal popup. |
| 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 modal and the link must be on the same page, and the names must match exactly, including lowercase letters.
- Use a descriptive link text such as
View the delivery termsinstead ofclick here. Screen reader users often move from link to link and hear only the text. - If you use an image as the trigger, give the image an
alttext in the HTML, otherwise the link has no readable name. - Several links can open the same modal, so one shared modal can serve a whole page.