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 ?