Scrollable "pined to browser" lightbox

Axure RP 8
1

Hay all

Quick question.
Is it possible to make content that is pined to browser and treated like a lighbox scrollable?

Heres the setup.

  1. Have long content page.
  2. Have overlay with content that fills more then the browser height, that is hidden, and pined to browser.
  3. click button to show overlay, and treat it as a lightbox.

The problem is, that if i dont set the “pin to browser” option, the overlay content is at the top of the page, so i have to scroll up to see it if im at the bottom of the page. If i set the"pin to browser option it shows like a normal lightbox would, but im unable to scroll the overlay content, witch fills more then the browser height.

Is there any way to make content that is pined to browser scrollable?

Best regards and thank´s in advanced
Jens

2

I just did a test of this …

if you put your modal content inside a second DP inside the modal
and set that second DP to scroll vertical as needed…

it should scroll the modal in pinned or lightbox. .

notes:

you can hide the scrollbar if needed… cover it , whatever

you can turn off/ on the scrolling of the underlying page
by putting some JS in the modal case logic. .

on modal load …
$(‘body’).attr(‘style’,‘overflow: hidden’);

on modal hide…
$(‘body’).attr(‘style’,‘overflow: scroll’);

or similar syntax…

it was only a quick test but it seemed to do ok !

3

From what you are describing, you shouldn’t be using the pin feature at all. Instead, move the lightbox to where you want it before you show it. In the attached example I’ve added a Move action to the OnShow event of the lightbox panel. The formulas in the Move action moves the panel to the center of the window on x, and to Window.scrollY + 100 on y. There is a button part way down on the page that will show the panel using the lightbox option.

The beauty of putting the positioning in the OnShow event is that anything can show that panel and it will just appear where you need it.

Hope this helps!
ScrollableLightBoxExample1.rp (60.9 KB)

2 Likes
4

@bedgin Thanks a million, that did the trick :slight_smile:

1 Like
5

@bedgin Nice! Have been pinning my lightboxes forever as a “work around”, this is much more elegant and realistic!

1 Like