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.

Screenshot of the pop-up portion of pop-up text.

Be sure to preview your pop-ups on a mobile device and that the content your are including fits on a small phone. More than two to three paragraphs won’t fit on a phone screen and a user may have difficulty scrolling within the pop-up. You can also adjust the size of the pop-up window to accommodate the text you are including. If you have a lot of text, consider creating a separate webpage instead of a pop-up.

Pop-up text snippet.

View pop-up text in the Style Guide.

  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.

(Video has no sound.)

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. Linked chains icon in toolbar to insert or edit a hyperlink.
  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” (without quotation marks) in the blank field.
  11. Click Save to close the link window.
  12. Save and Publish your changes.

(Video has no sound.)