My modal is designed to display the status of a transaction on my website, but I'm facing an issue where the backdrop dimming effect is being applied over the modal. Instead of appearing white as intended, the modal ends up having a dark gray tint. I have tried adjusting the styling but seem to be missing something. https://i.sstatic.net/ttXxb.png
Below is the styling for the modal:
const modalStyle = {
position: 'absolute' as 'absolute',
top: 0,
left: 0,
width: "80%",
marginLeft: "auto",
marginRight: "auto",
marginTop: "150px",
marginBottom: "150px",
bgcolor: 'white',
boxShadow: 24,
p: 3,
borderRadius: "25px"
}
And here is the HTML code for the modal:
<Modal
open={open}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
sx={modalStyle}
>
{!done ? (
<div style={{ display: "flex", flexDirection: "column", height: "100%", alignItems: "center" }}>
<h1 style={{ fontSize: "50px", textAlign: "center", fontWeight: "700" }}>Transaction Loading...</h1>
<Box style={{ display: 'flex', width: "300px", height: "300px", justifyContent: "center", }}>
<CircularProgress style={{ marginTop: "50px" }} size={150} />
</Box>
</div>) : (
<div style={{ display: "flex", flexDirection: "column", height: "100%", alignItems: "center", zIndex: "25" }}>
<h1 style={{ fontSize: "50px", textAlign: "center", fontWeight: "700" }}>Transaction Completed!</h1>
<svg className={styles.animatedCheck} viewBox="0 0 24 24">
<path d="M4.1 12.7L9 17.6 20.3 6.3" fill="none" />
</svg>
</div>)}
</Modal>
I'm puzzled by this issue as I have used a similar modal declaration elsewhere in my project without any problems.