Streaming live at 10am (PST)

Close centered Modal when click on wrapper


I’m trying to design a popup containing form with the following behavior :

  • I can open the popup clicking on a button -> Good
  • I can input info into my form AND close the button clicking on the outside wrapper -> Does not work

-> Option 1 : like in the tutorial, I create a Modal within a wrapper [NOT OK]

And I add interaction to the wrapper to hide himself on click -> Issue, if i click on the modal that is within the wrapper Div, I close the popup -> I can not input any data in my form

-> Option 2 : I put the modal into another Div to use it as a flex container to center my modal (popup)
If the div as a lower z-index than wrapper, it is display behind my background wrapper (not good)
If the div as a greater z-index than wrapper, when I click on Wrapper to close the popup, I in fact click on my Div modal father.

-> Option 2 : I dont’ place my popup in a div -> I can’t center it in the middle of the screen using flex container.

Any-other option ?

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


I just found what I think you’re up to:

Hope this helps!