I recently updated the user interface of my webpage to include an image with a floating div positioned in the center of the image. The div contains a button that triggers the opening of a modal (utilizing Bootstrap 3.3.7). However, when I click on the button, everything appears greyed out and the modal opens within the div itself, making it impossible to view or close. I have included screenshots for reference, but unfortunately, I cannot share the full page due to privacy and security concerns.
https://i.sstatic.net/GjH9y.png https://i.sstatic.net/bvJFm.png
Below is the CSS code for the div:
.card {
/* Add Shadow Effect*/
box-shadow: 0 16px 32px 0 rgba(0,0,0,0.9);
transition: 0.3s;
/* Dimensions */
padding: 5px;
width: 400px;
height: 159px;
text-align: center;
border-radius: 1rem;
/* Centering */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Miscellaneous */
background: #CFD8DC;
margin: auto;
}