I recently created a cards page where multiple cards are displayed. Each card opens a modal component when clicked, but unfortunately, the close button is not functioning properly.
Here's an image showing the issue with the button's position when inspected: https://i.stack.imgur.com/kFUcL.jpg
If you want to check out the complete code on codesandbox, here is the link.
The imagePopup.js modal component includes a close button:
import React from "react";
import { makeStyles } from "@material-ui/core";
import Modal from "@material-ui/core/Modal";
import Backdrop from "@material-ui/core/Backdrop";
import Fade from "@material-ui/core/Fade";
import ActionButton from "./ActionButton";
import { CloseOutlined } from "@material-ui/icons";
const useStyles = makeStyles((theme) => ({
modal: {
display: "flex",
alignItems: "center",
justifyContent: "center"
},
paper: {
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5]
},
actionBtn: {
position: "absolute",
right: 555,
top: 85
}
}));
export default function ImagePopup(props) {
const classes = useStyles();
const { openModal, setOpenModal, handleOpen, handleClose, img } = props;
return (
<div>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={openModal}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500
}}
>
<Fade in={openModal}>
<div>
<div className={classes.actionBtn}>
<ActionButton
// edit icon functionality
color="secondary"
onClick={handleClose}
>
<CloseOutlined fontSize="small" />
</ActionButton>
</div>
<div className={classes.paper}>
<img src={img} height="500" />
</div>
</div>
</Fade>
</Modal>
</div>
);
}