What’s a pop-up?

A pop-up is a content area that is overlaid on the page when a visitor clicks on a link to activate it. A common example would be thumbnail images that allow visitors to click on them to view a larger version of the image.

Note: The pop-up page is available in the horizontal navigation template (CLF3 and CLF4).

How to build a pop-up page

The first step is to build the page that the link will point to. This is the page that will appear to float on top of the current page when the user clicks on the pop-up link.

1. In the WCM, select New Page and choose Pop-up Page from the list of templates. Open the page in the Editing Window and add components and content as needed.
   Note: If you're using the CLF4 pop-up page with the Alert Box component, place all components inside a Column Control Component.
2. Then open the page that will contain the link to the pop-up page. Drop in a text component and add the text that will serve as the link text.
3. Select the text and click the Hyperlink button. Click the magnifying glass button to navigate to the pop-up page you created in step 1.
4. Click on the Source Edit button to modify the source code. Search for the href portion of the link, e.g., <a href="/content/sfu/mydept/popuppage.html">. Add a class of "sfu-popup" to the link.

<a href="/content/sfu/mydept/popuppage.html" class="sfu-popup">

Click OK to make your changes.

Test the pop-up page

To verify that the pop-up page is functioning correctly, go into Preview mode and refresh the browser page. Then click on the URL that you just created and the pop-up page should appear. To close, on desktop, click 'x' at the top right corner. On mobile devices, click 'x' at the top right corner or 'close' at the bottom of the pop-up page.