Working with the Show a Page in a Light Box action (Target Pages)

Create unique and engaging learner experiences by showing Target Pages as content in a modal window over your main page

One of the web design ideas that was developed as part of responsive design was the modal window, basically the ability to open content over top of the main web page while keeping the main page visible (usually greyed-out) in the background.

If you’ve been scrolling down on a commercial website and suddenly a box pops up over the page with a “Get 10% Off Your Next Purchase” message, then you’ve experienced a modal window.

But modal windows don’t have to be annoying – in fact, they can be part of a really great design.

We use modal windows in this quiz game. When you select a card, the related question is shown in a modal window over the main page. Give it a quick try:

>> The Music Pro Ultimate Quiz

(This is example is available for you to import into your own dominKnow | ONE site from the marketplace. >> Accessing dominKnow samples and partner content)

Modal Windows in dominow | ONE

In dominKnow | ONE there are three main features that use modal windows:

Show Popup – lets you set up an alert-style modal window over the main page. Popups are also used for feedback on Question pages. (Here's an article that includes steps to set up a Popup action on a button.
- This is covered in another article, >> Setting a Button to Show a Pop Up and Display a Variable String
Show Light Box – lets you show one or more images in a modal window over top of the main page.
- This is covered in another article, >> Adding a Show Image in a Light Box Action to a Button
Show Page in a Light Box – lets you show a full page in a modal window over the main page.

The music quiz example above uses the Show Page in a Light Box feature. (A Light Box is a type of modal window in the web design world.)

You can assign this action to pretty much any element on a page as well as content elements added over images and uploaded video files, such as hotspots. You can also trigger this action based on audio timing or video timing.

Show Page in a Lightbox

For most elements, you can find the Show Page in a Light Box action by selecting the element on the Stage then selecting the Action element control (purple lightning bolt icon).

You can also find the Show Page in Light Box action on the full actions panel.

Selecting either one of these options opens the Element Interactions tab to the right of the Stage.

Selecting Add Page gives three options:

New Target Page
Page From Current Project
Copy Page From A Project

New Target Page

Selecting New Target Page opens a panel to the left of the Stage similar to adding a new page to your project. You can select from Starters, Blank Layouts and more to use as the starting point for the new target page.

When you insert a page, it is listed on the Element Interactions tab. You can the complete the set up for the action.

The page is also added to the Project >> Targets tab, and you can go there to edit it.

Page From Current Project

Selecting Page From Current Project opens the Select a Page From Your Project panel displaying the Project Outline for the current Project you are working in.

When you insert a page, it is listed on the Element Interactions tab. You can the complete the set up for the action.

The inserted page remains in its location in the Project Outline.

Copy Page From A Project

Selecting Copy Page From A Project opens the Find Content to Reuse panel. You can search or browse to a Project.

When you insert a page, it is listed on the Element Interactions tab. You can the complete the set up for the action.

Inserting a content page duplicates the page and adds it to the Project >> Targets tab, and you can go there to edit it.

Inserting a Target page from another project allows you to either duplicate or share the target page. Duplicating the target page will create a copy to it in the current project. Sharing will add the target page to the current project and link it to the original page so it will be synchronized for changes. In both cases the page is added to the Project >> Targets tab, and you can go there to edit it.

On the left-side panel, the Project tab ahas a sub-tab, Targets.

This lists all Target Pages for the project.

Target pages are not shown in the Project Outline.

You can select a target page here to edit it.

Need more inspiration?

The possible uses for a Show Page in a Light Box action are only limited by your imagination.

We've seen clients use the action to:

Provide feedback in a custom interaction
Show a full diagram when the learner selects a thumbnail image on the main page
Show a menu for a project so learners can select which section they want to navigate to. (Target pages can indlude page links to any page in the Project Outline.)

Plus you can set up multiple versions of this action on the same page using multiple buttons or trigger elements like we did to display Capture lessons at the bottom of this example:

>> The Need for Speed (Image Optimization)

(This example is also available to import into your dominKnow | ONE site from the Marketplace!)