I wish popup grayout would gray out another popup behind it

Idea
1

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:

38%20PM
38%20PM1440×745 135 KB

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.

Thanks!

2 Likes
2

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
3

Hacky, but could work. Thanks for the idea!

4

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

5

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

Sonya

6

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.

7

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