Pop-up Text Snippet

This snippet allows you to create a link or button on the page that opens a pop-up window displaying text. The pop-up can include headings, links, and images.

pop-up-example

Pop-up text snippet.

  1. Enter the text that will display on the main page in the Link field. If you are linking from a blockquote and need to include an author you must insert the Blockquote snippet.
  2. If you want the link on the page to be a button or a blockquote instead of a plain link, enter the corresponding code in the Link Class field.
    1. “p” (without quotation marks) will create a plain link.
    2. “button” (without quotation marks) will create a gold button that changes to gray on hover.
    3. “button-black” (without quotation marks) will create a black button that lightens on hover.
    4. “button-blank” (without quotation marks) will create an outline button that changes to gold on hover.
    5. “blockquote” (without quotation marks) will create a blockquote. If you need an author in the blockquote, the Blockquote snippet needs to be inserted in the Link field.
  3. The Width and Height determine the size of the pop-up box in pixels.
  4. Enter a unique identifier in the ID field. If you are including multiple pop-ups on the page, they must be different values. The ID can only include lower-case letters, numbers, and hyphens.
  5. Enter the content that will display in the pop-up in the Pop Up field.

This snippet can also be used in the Button Text field of the List Spread Touts snippet to allow the tout to pop up a text window when clicked.

Adding a Text Pop-up Inline

To link to a pop-up from text that is within a paragraph follow these steps.

  1. Insert the snippet after the paragraph where the pop-up will be linked from. You will need one snippet for each separate pop-up.
  2. In the snippet, leave Link (#1 in the image above) blank.
  3. Set Link Class (#2 in above image) to “custom-link” without the quotation marks.
  4. Set Width and Height (#3 in image) as needed.
  5. Enter the unique identifier in the ID field (#4 above).
  6. Enter the desired content that should appear in the pop-up window in the Pop Up field (#5).
  7. Select the text in the paragraph above the snippet that will open the pop-up and click the Insert/Edit link icon insert/edit link icon.
  8. In the URL field, type # followed by the unique identifier you set in the ID field.
  9. In the Class field of the Insert/Edit Link window, select (custom).
  10. Type “various inline” (without quotation marks) in the blank field.
  11. Click OK to close the link window.
  12. Save and Publish your changes.

Watch a video to see how to add pop-up text to your page.


Comments Closed