Adding pop-ups » Glasshouse documentation

Overview

Pop-ups are modal boxes which hover over the main content in a page, and display additional text, more information on a subject, or interactive activities. They can also contain images and video. Pop-ups are specific to the page they have been created on, and are triggered when the user clicks on the pop-up trigger in the page. The same pop-up can be triggered from multiple points on the same page by re-applying the pop-up trigger to different text.

How to add and create Pop-ups

Creating the pop-up

Start in the Pop-up tab of the Page management area.

Click the Add Pop-up button.
Add a heading for the pop-up into the Heading field.
Add a lowercase pop-up trigger name into the CSS Class that will trigger the pop-up field. This is what you will select from the Styles dropdown menu later to trigger the pop-up. There is a pre-configured, random trigger name already created which can be changed to a name of your choice.
Click on the Pop-up Content tab to add content to the pop-up.
Add text or images into the Content field.
Click Save and close.

Adding the pop-up trigger

Navigate to the Content field of wherever the pop-up should be triggered from on the page. It can be the content field in the Main tab, or within a block on the page.

Select the text or content which will trigger the pop-up when clicked.
Click on the Styles dropdown menu and select the popup name just created. The page may need to be refreshed for the pop-up class to appear in the drop-down menu.
Click Save and publish.

Adding the pop-up trigger using the new formats option New!

Navigate to any content field under any page type which supports pop-ups. If you now begin editing content you should find a Popups option under the Formats option in the toolbar.

Simply highlight any content in the editor and apply a Pop-up trigger from the formats menu.

Options

Pop-ups can also display all types of blocks as well as content. See Adding blocks to pop-ups for more details.

Adding media

Video can be added to a pop-up by clicking on the Media tab within the pop-up window. As with adding media to a page or block, there are options to select where the video is placed in the pop-up and which video to display, as well as input field to restrict the width and height of the video.

Small popups

In the pop-up window, the checkbox Show as small pop-up can be checked to make the pop-up a small tooltip style pop-up rather than the standard modal window. This works best with text rather than images, and only a limited number of words.

Developer note

Pop-up triggers are actually CSS classes - therefore they can be added to other kinds of content if needed, or have styling added specifically for that class.

Trigger colour

Add a colour (in HEX value) to the Background colour of the trigger as an HEX value field (optional) in the pop-up window. This will be the background highlight of whatever text you have selected as the pop-up trigger in the back-end. Leave blank if the trigger is an image. This will not affect the colour of the trigger text in the front-end.

Adding blocks to pop-ups