Click outside the modal to close it

Hi,

I want to be able to close a modal when i click outside it.

at the moment I have a modal wrapper>modal>crop wrapper.
if i assign a close modal interaction to the modal wrapper (which is in background) it works but it also closes the modal when i clic on the modal itself (as if it was transparent).

how can i make it work?

Thank you,
G


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

Don’t use a wrapper for the background. Create a separate full screen div that sits below the modal using z-index. Then assign the close modal interaction to that new full screen div that is now under the modal.

The modal itself will block the click when clicking anything within the modal. Just remember to add to your interaction to close the new div when you close the modal.

2 Likes

Thanks! I’ve done that:

https://giuseppe-bufalo.webflow.io/archviz

top left project “zaha hadid” as you can see it closes also when I click on the modal. how come?

Hey @Giuseppe I am not seeing that new div in your site structure…just the wrapper with the modal inside…can you screenshot the part of the div outline where the new modal background is located?

I attached a screenshot.

Should the modal wrapper just work fine? it is a full screen div with 10000 of z-index and in fixed position… just like you described.

I don’t understand why when I click on the “crop wrapper” it closes the “modal wrapper”. Technically it shouldn’t because is on top of the “modal wrapper”.

It doesn’t matter what the index is of the wrapper if the modal is inside it - If you click on a wrapper you will be clicking it’s children too. That is why you need to separate them. As of right now your modal is not on top of your wrapper - it is inside it.

Your structure should look like this:

<background div>
<modal wrapper div>
     <modal>

NOT

     <modal wrapper div>
           <modal>
3 Likes