Creating Popups Using the "Popup" Button – Mag+ Designd Support

Popups allow you to have a piece of content appear - or pop up - when a user touches a Hotspot. As of Mag+ version 5.0, a separate Popup Panel has been added in InDesign, allowing you to place several types of objects onto any of the Popup layers.

This article shows you how to use the "Popup" button in the Mag+ Object panel (introduced in Mag+ 5.2). For instructions on creating Popups using the "Link" button, please read the article "Creating Popups using the 'Link' Button."

Supported Popup Objects

Block
HTML
PDF (iOS devices only)
Slideshow
Inline video

Note: The Popup Panel becomes active when you select an object placed on one of the Popup layers.

Each Popup layer matches reference objects placed on a particular Mag+ content layer.

Ap - Popup contains Popups for content on the A - Main Tower layer
Bp - Popup - Pinned Blocks contains Popups for content on the B - Slides - Pinned Blocks layer
Bp - Popup - Main Content contains Popups for content on the B - Slides - Main Content layer

For more information on the predefined Mag+ Layers, refer to the article "Predefined Mag+ Layers in InDesign."

How to Create a Popup Using the Popup Button

A Popup consists of two elements: the object which triggers the Popup (called a Hotspot) and the Popup content itself.

The following steps will guide you through the creation of a Popup in the Mag+ InDesign Plugin. In this example we will place a grouped image on the “B - Slides - main content” layer. When a user taps the group, a larger version of the image will appear in the form of a Popup.

Note: You will always want to place the trigger for your Popup on one of the main content layers: B-Slides-Main content, B-Slides-Pinned blocks, or A-Main Tower.

1. Place an image (or images) grouped with text on the "B - Slides - main content" layer.

2. At the bottom of the Mag+ Objects Panel, click the "Popup" button.

3. Mag+ creates a blue frame and an empty frame on the page.

A blue frame will be added to the layer “C - Clickable Areas." This blue-tinted frame represents the Clickable Area (also called a Hotspot) for the Popup. By default, the Hotspot will cover the entire area of the grouped object. You can choose to resize and move this Clickable Area in order to define where the user can tap to call up the Popup.

Hotspots can be triggered in a variety of ways and the behavior is set in the Mag+ Object panel in the dropdown menu called Trigger (Label 1). By default, the Trigger will be when someone taps the Hotspot area but other options include:

On Tap: The Hotspot will be triggered when a user taps on the Clickable Area box.
In View: The Hotspot will be triggered when the Clickable Area box comes into view on your layout.
Out of View: The Hotspot will be triggered when the Clickable Area box exits view on your layout.
Shake (iOS only): The Hotspot will be triggered when the Clickable Area box is in view on your layout and the user shakes the device.
None: There is no user-accessible trigger. The Hotspot will only be triggered by another Link.

An empty frame will be created on the associated Popup layer. In this demonstration it is Bp - Popup - Main Content.

Mag+ creates a blue frame and an empty frame on the page.

4. Select the empty frame and place a larger version of your image inside of it.

Note: The Clickable Areas layer has been hidden in this screenshot in order to show the larger version of the image.

5. In the Mag+ Popup Panel, set your Popup options.

There are various options for how a Popup is displayed:

Standard (Default)

The Standard Popup will appear instantly once the trigger object (Hotspot) is tapped. A user taps on the Hotspot again to dismiss the Popup.

Initially visible: Displays the Popup instantly. Tap the trigger object (Hotspot) to hide the Popup.
Popup group: A Popup that is part of a larger (or nested) group of Popups.

Note: Only one Popup in a Popup group can be displayed at a time. Triggering another Popup that is part of the same group will automatically close the previous Popup.

Modal

Modal Popups are displayed differently than standard Popups. A modal Popup fades in a darker, transparent layer behind the Popup in order to give it more focus. A user taps on the darker background to dismiss the modal Popup.

Popup transition: The transition used to display the modal Popup. Options include Default, Zoom, and Flip. The Default option simply fades the Popup into view. Zoom is an animation that scales the Popup as it appears. Flip will flip the Popup as it appears.
Add close box: (Only for Modal Popups) Adds a close button in the right-hand corder of the Popup. End-users must tap the close box in order to dismiss the Modal Popup.
Center on device: (Only for Modal Popups) Centers the Popup on the screen no matter where it is placed on the layer. This option prevents Popups from accidentally stacking on top of each other.

6. In the Mag+ Verticals Panel, click on "Fast Review" to push the design to your Review device.

Note: To push to your Review Device, you must have downloaded the Mag+ Reviewer app and configured the push settings. For more information, read the article "Setting Up and Using the Mag+ Reviewer."

Using Your Own Objects Instead of the Default Empty Frame

You can always delete the empty frame that Mag+ creates and use other objects you have created in InDesign (including grouped objects). To do this, follow these steps:

1. Note the layer where the empty frame was created.

2. Delete the empty frame.

3. Place your own content on the layer you noted in Step 1.

4. Select the blue-tinted frame (the Hotspot) that Mag+ created for your Popup.

Note: In the screenshot below, the "C-Clickable Areas" layer was made visible in order to see the Hotspot frame.

5. In the URL field of the Mag+ Object panel, select and copy the text that follows "popup://."

In the image below, it is "p442."

6. Select the content you placed and in the Object ID field of the Mag+ Object panel, paste the text from Step 5.

7. You can now set your options for the Popup in the Mag+ Popup panel.

TIP: If you want to add a web link or jump link to your Popup object you will first create your Popup object. Then create the web link or jump link object as you normally would (see Creating Web Links or Creating Jump Links) then once it has been created, change the Object ID of your Clickable Area to match the Object ID of the Popup you created.