Streaming live at 10am (PST)

Closing a Pop up box by clicking outside of it


#1

Hi guys,

I'm making a site from a template which has a pop up footer for the contact section with an x to close it in the top right. I'm wondering how can i make it so that clicking anywhere outside the box will also close it? Thanks a lot. Merry Christmas :smile:

Niall


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


Closing a Pop up window by clicking outside of it (does not work)
#2

Hi.

Nest your popup in a parent element (div). Give this parent a z-index lower than the one of the popup. Make the parent expand all the way of the browser by setting its dimensions like 100VW and 100VH (type-in the vw and vh units, they mean "percentage of the viewport", webflow will take them). Center you popup inside the parent element.

Now, give the new parent element the onClick closing interaction you've been building for your "X" icon and it should close the popup as if you'd clicked on "X".

And now that you have this element you can try to give it a background color at 98% opacity, or a transparent texture from http://www.transparenttextures.com/, or both, to make you popup stands out :smile:


#3

Thanks a lot for the reply. This didn't work for me though. It closes the pop up when I click within it rather than outside of it. So if I try and enter a message the box closes. Any suggestions? Cheers


#4

Probably because you didn't set a lower zindex for the big new div than for the popup itself, hence the div being on top of the popup and catching the click.


#5

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