How to disable background while opening pop-ups


I have created pop-ups using in-built components in Axure. I want to disable the background in light whitish colour when I open the pop-ups. Please find below a sample of the actual pop-up in the system and the disabled background in white color though it is still visible.

Hi -

Attached is a quick sample I made for you - using a google page as a sample. The textbox and buttons are enabled on page load. Clicking either button will show a fake modal that has a whiteout and disables the background. Key components:

  1. A dynamic panel (can also use a regular rectangle widget) that gets set to window.width and window.height. It also needs to be moved when the window scrolls. See the OnWindowResize and OnWindowScroll events. For my example I used a Dynamic Panel named “Disabler” and set the background to white with a 70% opacity. Obviously you can set this to whatever you’d like. I always leave it a small widget and use DPs because you can easily hide the visibility in your prototype file. The load event takes care of making it the right size when the page is loaded.

  2. On show of my content - I show the “Disabler” dynamic panel, bring it to front, and the force my content to the front on top of it. This leaves anything in the modal enabled, but everything else is covered by a dynamic panel that has no click actions.

  3. When hiding the modal, hide the disabler dynamic panel.

Have a look - nothing fancy, but I think it shows the concept so you can adapt to your needs. If you have an RP file you can share, I can do something similarl with your file.

modal with disabler.rp (85.9 KB)