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!

[Jinwook94]

Thanks a lot! @dhairyasenjaliya

[dhairyasenjaliya]

Nice! maybe we should add a little note into the styling document of the repo since this repo is widely used and mainly it will save time for the user to find this :)

thoughts @diasbruno

[diasbruno]

@dhairyasenjaliya That would be great. So, I believe the problem is not about react-modal itself, but when the page has to manage z-index "by hand".

Here, react-modal/styles/classes.md, is where we need to add something about this.

[dhairyasenjaliya]

yeah that would be the perfect place developer can identify issues by simply visiting the classes document @diasbruno