Recently, I completed a React project that utilizes an API to search for movie titles. The project returns a list of movies corresponding to the user's search query. Everything seems to be working fine up to this point.
However, I encountered an issue with styling when it comes to displaying more detailed information about each movie in a modal. When I scroll down the list and click on a movie, the modal always opens at the top of the page.
I'm wondering how I can make each modal open based on the position of the mouse or the button element that was clicked.
Here is the CSS styling I have implemented so far:
.modal {
display: flex;
width: 100%;
height: 100vh;
justify-content: space-around;
align-items: center;
background-color: rgba(0, 0, 0, 0.753);
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.inner-modal {
text-align: left;
background-color: rgb(255, 255, 255);
color: black;
width: 70%;
height: auto;
padding: 40px;
}
.modal-poster {
float: right;
width: 30%;
padding: 20px 0 20px 30px;
}