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.
Start in the Pop-up tab of the Page management area.
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.
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.
Pop-ups can also display all types of blocks as well as content. See Adding blocks to pop-ups for more details.
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.
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.
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.
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.
Here's some content for the pop-up which will only display once the pop-up bug has been fixed...