Adding pop-ups » Glasshouse documentation

Overview

Pop-ups are modal boxes that appear over the page content to show extra information, images, videos, or interactive activities. They are created for a specific page and are triggered when the learner clicks a pop-up trigger in the content. The same pop-up can be linked to multiple triggers on the same page by applying the same trigger to different text or content.

How to create a pop-up

In the Page management area, go to the Pop-up tab.
Click Add pop-up.
Enter a title in the Heading field.
In CSS class that will trigger the pop-up, enter a lowercase trigger name.
-This is the name you will later select from the Format dropdown.
-A pre-filled trigger name is created automatically — you can keep it or change it.
(Optional) Trigger colour — You can customise the trigger’s appearance by adding colour to the background or font. Enter HEX values in the -Background colour of the trigger and Font colour of the trigger fields. Leave blank to use default colours.
In the Content field, add your text and or images. Blocks can be added to the pop-up as well. See Adding blocks to pop-ups for more details.
To add video or other media, click the Media tab within the pop-up window. You can:
-Select where the video will appear in the pop-up.
-Choose which video to display.
-Set custom width and height.
Click Save and close.

Adding the pop-up trigger

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.

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

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 an input field to restrict the width and height of the video.

Small popups

In the pop-up editing 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.

Trigger Colour

You can customise the trigger’s background or font colour by adding HEX values in the Background colour of the trigger and Font colour of the trigger fields.

The background colour sets the highlight for the selected trigger text in the back end. Leave the background colour blank if the trigger is an image.

This will not affect the colour of the trigger text in the front end.

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.

Adding blocks to pop-ups