I have a website with three columns using Bootstrap that contain images, each with a button in the center. I added a dialog window that should appear when a user clicks on a button within an image. However, the dialog window appears behind the columns and images. I need help fixing this so the dialog displays over the contents of the whole page. Can anyone assist me in resolving this issue? Below are the code snippets I've included:
<html>
<head>
<!-- Meta tags and CSS/JS links -->
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now I'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<!-- Column 1 -->
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<a href="vido.html"><span class="button fa fa-play fa-2x"></span></a>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add more columns here -->
</div>
</div>
</body>
</html>
Dialogue.css
<!-- CSS for the dialog box styling -->
Hover.css
<!-- CSS for hover effects on images -->