React-modal: Background Content Visible in Modal

Created on 9 Jun 2021  路  5Comments  路  Source: reactjs/react-modal

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

not a bug styling

Most helpful comment

.ReactModal__Overlay {
z-index: 1000;
}

this workes well

All 5 comments

.ReactModal__Overlay {
z-index: 1000;
}

this workes well

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

Thanks!

@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.

It works! Thanks a bunch

Awesome!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jrock17 picture jrock17  路  4Comments

dragonball9816 picture dragonball9816  路  3Comments

kinucris picture kinucris  路  3Comments

gavmck picture gavmck  路  3Comments

tairy-potter picture tairy-potter  路  3Comments