Lightbox and background locking

#1

Hello pair prototypers,
I have a scrolable lightbox, how do i lock the background to prevent from scrolling?

#2

Being able to scroll the web page (background if a lightbox is shown) is a standard implementation. I think it would be nice to have a built-in HTML option like, “scroll: false” but there just isn’t. You could perhaps use CSS (overflow: hidden) as outlined in this article: https://davidwalsh.name/prevent-body-scrolling …and then set up a CSS function and work out how to dynamically call it when your lightbox panel shows.

I think a “strict Axure” way to do the same thing would be to select everything on your page except your lightbox panel and convert that selection to a dynamic panel. Name it something (PageBody or Whole Page or whatever) so you can refer to it. In the Shown event of your lightbox panel, add an action to “Set size of PageBody to [[Target.width]] , [[Window.height]]”. That should prevent the page from scrolling as the browser would see the height of the content as matching the browser window height.

You’d want to undo this when the lightbox hides or gets dismissed, which means you’ll want to keep track of the initial height of the PageBody panel. You can use a global variable or the text of a hidden widget for this. For example, in the Loaded event of PageBody you could have “Set value of OnLoadVariable to [[This.height]]” and in the Hidden event of your lightbox panel, an action to “Set width of PageBody to [[OnLoadVariable]]” --Give this a try.

#3

If Axure would implement an option to disable background scrolling when a lightbox is visible, would be great :slight_smile: