I wish popup grayout would gray out another popup behind it

Occasionally, I show a popup (let’s call it B) on top of another popup (A). Right now, the grayout from B is graying out the page background nicely, but popup A is not grayed out, as you can see in the screenshot below:

Yes, there’s room for UX/design improvement on my end, which I will do, but it would be nice if everything was grayed out, including popup A.



Suggested solution using a conditional…

  1. Put a black Shape element (rectangle) over Popup A . Make sure it’s on “top” (bring to front), and set it’s opacity as desired. Also, make sure it’s not visible on page load.
  2. Create a conditional on the Shape element such that when Popup B is visible, the Shape element is visible as well.

I haven’t actually tried it, but it seems like it should work.

1 Like

Hacky, but could work. Thanks for the idea!

Try making a workflow to hide popup A before showing popup B. Not sure if it works for your idea

Hi Phil,

I saw your thread and have a question as you’ve clearly been able to do it. How did you get your popup B to show ‘in front’ of popup A?

I can get my popup B to ‘pop up’ but it’s always behind A. I am thinking that there’s something simple I’ve missed, otherwise I will do it with ‘set state’ (or something else back-end), and so I thought I’d ask you as you clearly have done it!

Thanks in advance


I’m not using Bubble these days but as I recall, you need to recreate popup B so it shows up above popup A in the sidebar navigation in the backend. Something like that.

Thanks Phil, appreciate you getting back to me, I’ll take a look.