Modal Text / HTML Link Element

07/08/2019

The Modal Text / HTML Link Element is another simple element, that allows you to add a text or html link to trigger a modal dialog, in conjunction with the Modal Element. The two work hand in hand. With this simple element, you can add some text to trigger a modal, or you can add html or shortcodes (like an image) to trigger a modal that way as well.  See below to read more about this handy element.

This text triggers a small modal window.

This image triggers a large Modal window.

How to use the Modal Text / HTML Link Element

Let’s add some simple text to trigger a Modal, using the Modal Text / HTML Link Element.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 – Add a Modal Text / HTML Link Element via the Fusion Builder.

Step 3 – The first thing to add is the Name of the Modal (which you will also add to the Modal element you add beneath this element). This tells the Element which Modal to trigger.

Step 4 – The next step is to add our triggering text / HTML to the text or HTML code field. For example, we could write Open this popup window for more details. Alternatively, to use an image to trigger the modal, insert the image code. Example below.

Step 5 – Click Save.

Step 6 – The next step is to create the Modal Element you wish to trigger. To read more about the Modal Element, view this documentation.

Example of Modal text / HTML Link Element
Copy to Clipboard

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

  • 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. This will also work with Shortcodes.

  • CSS Class – Allows you to add a class to the wrapping HTML element.

  • CSS ID – Allows you to add an ID to the wrapping HTML element.

View The Options Screen

Global Options

The Modal Text / HTML Link Element does not have any global options.

Modal Text / HTML Link Element Parameters

Copy to Clipboard
  • name – The unique identifier of the Modal Element you’ve created.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
  • custom content – Insert the modal’s content between the
    Copy to Clipboard

    tags.