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!