Prototyping with Axure • Part 3 - Lightboxes

30 Mar 2018

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

• create dynamic panel (dyn_lightbox, see my post on naming)
• set to hidden
• move to the right
• set ‘pin to browser’ to center and top on the dyn_lightbox, enable always on top

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:

• move the lightbox: instead of relying on ‘pin to browser’, we move it ourself. The benefit is that you have full control. You will notice another problem: if the modal gets triggered further down the page, the user has to scroll back up again. This I fixed in iteration 2.
• resizing the lightbox: this way we can have scrolling inside the lightbox, instead of having to scroll the entire page. Downside: you can scroll inside and outside the lightbox. That’s a bit messy. As a bonus, I’ve managed to disable scrolling 🤓. However it does not work smoothly on OSX/iOS due to bouncy scroll 😒.
• rolling our own Of course you can always build your own lightbox! Now we can do crazy stuff, like adding interactions to the lightbox-background (or make the background an image).

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.