Working with the Show a Page in a Light Box action

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

One of the web design ideas that really took hold 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 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)

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 >> 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.
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.

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.

Showing a Page in the Project Outline

The panel shows a list of the Pages available in the Project Outline.

To show one of these pages in the modal window, select it from the list then select Apply.

Showing a Target Page not in the Project Outline

You can also create a separate Target Page that is not part of the Project Outline to show in the modal window.

To create a separate Target Page that is not part of the Project Outline, select the New Target Page option. You can choose to create an entirely new page or copy an existing page.

(A Target Page is not included in the Project Outline, so a learner won't see it in the Menu. It can only be accessed when a Show Page in a Light Box action is triggered.)

Adding a new target page lists the page on the Element Interactions panel.

It also adds the page to the Targets sub-tab under the Project tab to the left of the stage.

Selecting the New Target Page there opens the target page on the Stage for authoring.

You can also rename the page, which is important if you add more than one target page to your project.

You can add anything you want to a target page – text, images, videos, audio. You can also set up any type of interaction as well.

In the music quiz example above, there are separate target pages for each of the nine questions. Each page has a question as well as a timer – so there’s really no limit to what can be included on a Target page!

Adding more Target Pages

If you are on the Targets sub tab, you can also add target pages directly using the New Page options.

Any pages added here will be automatically shown as available on the Element Interactions tab when you are setting up a Show Page in a Light Box action.

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!)