React-modal: Background Content Visible in Modal

[dhairyasenjaliya]

Summary: Please do check the screenshot attached as currently using the minimal demo from package I'm able to see content from the background which I don't want to display in modal any styling problem might be the case

Steps to reproduce:

1. Used as per the example provided in package

Styles that I have passed in modal

const customStyles = {
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
background: "rgba(22, 11, 139, 0.8)",
},
};

I want to remove the pagination button as well as Mapbox text from the background

[dhairyasenjaliya]

.ReactModal__Overlay {
z-index: 1000;
}

this workes well

[philxavier]

Hey, same issue here..
Where exactly can I do that change? @diasbruno ?

Thanks!

[diasbruno]

@philxavier .ReactModal__Overlay is the default css class that react-modal generates. So you just need to add to your css something like @dhairyasenjaliya suggested...you just have to adapt to your case.

[philxavier]

It works! Thanks a bunch

[diasbruno]

Awesome!