© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

 

LIGHTBOX

When a lightboxed message, image, or video is shown, the rest of the page is dimmed. Clicking in the dimmed area closes the lightbox and restores the page to its previous state.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: GET STARTED

In the training document, open the page named "Lightbox".


The page contains a button and a dynamic panel with an image of a map inside it.


Hide the dynamic panel by selecting it and clicking the "Hidden" checkbox in the Style tab.

STEP 2: MAKE THE LIGHTBOX INTERACTION

Select the "view on map" button and double-click "OnClick" in the Properties tab to add a new OnClick case.


In the left column, click the action "Show". In the right column, click the dynamic panel.


At the bottom of the right column, use the "More Options" dropdown to select "treat as lightbox". A color picker labeled "Background Color" will appear. This picker is used to choose the to appear over the rest of the page when the "lightboxed" element is shown. The default color is #2F4F4F (a dark grey) with an opacity of 61%. Go ahead and stick with the default settings.


Click "OK" to close the dialog. You may want to preview at this point to make sure your lightbox is working.

STEP 3: PIN THE LIGHTBOX TO THE CENTER OF THE WINDOW

Sometimes a lightbox is pinned to the center of the window so that it always appears in the same location, even if the page is scrolled. Continue on to learn how to create this effect.


Select the dyanmic panel. In the Properties tab, click "Pin to Browser".


In the "Pin to Browser" dialog, check the checkbox "Pin to browser window". Then choose "Center" in the "Horizontal Pin" section and "Middle" in the "Vertical Pin" section.


Click "OK" to close the dialog.

STEP 4: PREVIEW

Click Preview. Click the "view on map" button to show show the map with a lightboxed effect. Click anywhere outside the lightbox to close it. We've also made the "close" button in the corner function to hide the dynamic panel and close the lightbox.

MORE RESOURCES

CORE TRAINING

TUTORIALS