My goal is to create a grid of photos that, when hovered over, display a button that can be clicked to open a modal. I initially got one photo to work with this functionality, but as I added more photos and buttons, I encountered an issue where the first button no longer opens the modal.
Below is the code snippet I have been working with:
</style>
</head>
<body>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Modal Title 1</h3>
<p>Modal Text 1
</p>
</div>
</div>
<div class="container">
<img src="https://previews.dropbox.com/p/thumb/ABFh1yeARivImN6pNH7kuatn60gVuTBKQO9dbkUPSa2nQQWvlgOMt4GIkI5ZlWvHDV1jhXJQ1JqmPPSRwqdwDZ360SPlxnHG7as4GypQWPvCGa0_IiZ8MY-dxF3qQ3azldvGF3P3pFUVOe5oi0pL4cTQiLbj4wqyX7f-SSYaVwD88sU8B-avSdROijI0_3zOecUEfMl9Hrx3uWviDREGperqRhJ7-YaB1VM-LRPh5ESKN92YeEdpM41tIIUL-CAbzcffQYNncc-XUi8TMpOdLL2lvH_s6W1kH70H4PuEt8b0fn5I6oAg8ami7_6GJSK4nPUYxWbrbqiAgrmv2U-7aYeWhtkiRf0l8JDGoP9BVblqcg/p.jpeg?fv_content=true&size_mode=5" alt="Fiona Garufi" style="width:100%">
<button1 id="myBtn1" class="btn">Button Text 1</button>
</div>
<!-- The Modal 2-->
<div id="myModal2" class="modal">
<!-- Modal content 2-->
<div class="modal-content">
<span class="close">×</span>
<h3>Modal Title 2</h3>
<p>Modal Text 2
</p>
</div>
</div>
<div class="container">
<img src="https://previews.dropbox.com/p/thumb/ABFh1yeARivImN6pNH7kuatn60gVuTBKQO9dbkUPSa2nQQWvlgOMt4GIkI5ZlWvHDV1jhXJQ1JqmPPSRwqdwDZ360SPlxnHG7as4GypQWPvCGa0_IiZ8MY-dxF3qQ3azldvGF3P3pFUVOe5oi0pL4cTQiLbj4wqyX7f-SSYaVwD88sU8B-avSdROijI0_3zOecUEfMl9Hrx3uWviDREGperqRhJ7-YaB1VM-LRPh5ESKN92YeEdpM41tIIUL-CAbzcffQYNncc-XUi8TMpOdLL2lvH_s6W1kH70H4PuEt8b0fn5I6oAg8ami7_6GJSK4nPUYxWbrbqiAgrmv2U-7aYeWhtkiRf0l8JDGoP9BVblqcg/p.jpeg?fv_content=true&size_mode=5" alt="Fiona Garufi" style="width:100%">
<button1 id="myBtn2" class="btn">Button Text 2</button>
</div>
</div>
</div>
<script>
// Get the first modal
var modal = document.getElementById("myModal1");
// Get the first button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the second modal
var modal = document.getElementById("myModal2");
// Get the second button that opens the modal
var btn = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html><html>
<head>
<style>
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #673589;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
position: relative;
width: 100%;
max-width: 400px;
transition: .4s ease;
}
.container img {
width: 100%;
height: auto;
opacity: 1;
}
.btn {
position: absolute;
top: 70%;
left: 50%;
transition: .4s ease;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: rgba(235,235,235,.5);
opacity: 0;
color: #351B47;
font-size: 20px;
font-family: "Raleway";
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
id: "myBtn";
}
.container:hover .btn{
opacity: 1;
}
.container:hover {
opacity: .75;
}
opacity: 1;
}