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 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.
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?
Thanks.
~:-)
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.