Streaming live at 10am (PST)

How to add lightbox to with a popup window

Happy Friday!
I’ve love a little help with the darkside.
I’ve created a little pop-up window that opens and closes nicely.

When it pops I want everything else to go dark. I see that I can do this for images and video using the lightbox widget.
But, how can I do a similar treatment to my window?

The page I’m working on is called “Difference”.

Below I have a mockup of the way that I want it to look and the second is the way it really is.

May the Force be with you.

Hi O :smile:

The same way you’ve created a Difference element to make your popup, build an “Overlay shadow” element (a div that you name like that) just between the page and the difference popup. Make it height and width 100%, at the same level then the difference element, just under the body in the hierarchy.

So once it’s 100% covering the screen, give it a black transparent background, adjust its z-index to be sure it’s under the popup, and pass it display none AND opactity 0%.

Now update you interaction. So far you hae 1 setp : show difference element. Add one step that shows the overlay shadow element, dirst passing it to display box in 0ms, then passing the opacity to 100% in 250ms. Now you can add a 250ms delay to your first step so that the popup pops after the overlay got shown. Adjust those delays to get the desired effect.

1 Like


Thanks for the input.
I’m with you until the interaction.

When I create the second step, I don’t see how it can effect another element.
My new element is “shadowbox”.

I meant the same way you target the Difference element here:

So you’d get somethign like this

Without any fine tuning you’ll get this

Click on on my BLUE difference bar works great the first time you click on it.

  • Pops up
  • Nice shadow box
    Closes nicely as well

But, if I want to open it again it requires 2 clicks to open
any tips on how to make it always 1 click to open 1 click to close EVERYTIME?

Here is my public share link: LINK
(how to access public share link)

Ha, that’s actually how Webflow handles interactions with 2 clicks and you can’t really do something against it, unless building a more complex interaction. If you have an open/close 2 clicks interaction, and if you give the user the possibility to close it with another interaction, you’ll be left with your 2nd click state waiting to be trigged, and there’s no way to reset it.

The only way is using only 1 click interactions. The first click could—on top of running the open interaction—make an element appear in front of the one you just clicked. There, a second 1 click interaction will trig the clisong and the disapearance of this new element. On the extarnal element, One click would always make the close interaction AND mask the new element.

At the moment this is the only way to achieve an open/close interaction with several closing points.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.