Disable body when fixed popin is opened

Question

I have a popin that I call in little components in my React app (so I can't take it out of the body)

Here is my Popin component :

return (
        currentState.isShowProductAccessesPopIn ?
            <>
                <div
                    className="custom-box-shadow fixed z-50 rounded-xl text-center shadow-lg left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2">

                    
                    [...]
                </div>
            </> : null
    )

As you can see, it is in position: fixed and centered on the screen.

Problem is : when it is opened, the body is still clickable. I want the background to be disabled, but as I said I can't take it out of the body.

Is there a solution on this ?

Thank you very much

Answer 1

I do not know enough about react to give you a working react example, however I can give you some direction as it is fairly easy to create, I think.

My suggestion is that you create an overlay div, which is positioned absolute, filling the total window with inset-0. This will cover all the elements in the background. In this overlay you can position your modal.

Here is a working example in tailwind play, based on HTML. If you try to click the button in the background, this will not work.

Hope this helps.