Prototyping with Axure • Part 3 - Lightboxes

TL;DR: download the handy library I made for tall lightboxes 👍

Can we have a lightbox?

Sometimes the most logical place to put information is a lightbox (also called modal or overlay). Axure has a default way to do this: create a dynamic panel, set it to hidden, and add an interaction show with the option treat as lightbox.

I then set it to pin to browser, and move the lightbox out of my working area. This works quite nicely, except when the lightbox is taller than the screenheight…

Why use pin to browser?

Lightboxes are usually placed in the middle of the screen. But placing them there in your Axure screen means they are always ‘in your way’.

My solution

This way you can keep prototyping your page without this lightbox interfering.

The problem

The problem arises when using a tall lightbox on a small screen. For instance a lightbox that contains a preview of a document. Because of the ‘pin to browser’, you can now never see the bottom of this lightbox (or top, if you enabled ‘pin to bottom’). You can see the problem in action here

The solutions

I’ve made three solutions to the problem:

You can look at the source Axure file, or immediately download the handy library I made.

Using OnShow

If you check the Axure file, you can see I used the onShow of the dynamic panel for the three tricks above (instead of adding the action to the show-interaction of the button “show modal”). This means I can trigger the lightbox easily with different buttons.

This is part 3 in a series, you can read part 1 here or you can continue to part 4 here.