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.

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.

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.

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.
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.