在放大图片下并排2个按钮

Question

I want to create 2 buttons at the bottom of my image when you click to enlarge the image. I have so far got my image working on click to enlarge, but I am struggling to get the 2 buttons at the bottom on my enlarged image. If someone could help, that would be great!

I am also trying to make the buttons on click to another popup form. Where they can order or enquire about that certain product. Please help me out, really pressed for time. Thanks

Here is the code I am using:

 // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } 

 /* Style the Image Used to Trigger the Modal */ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* 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: transparent; /* Fallback color */ background-color: transparent; /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #000; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } 

 <img id="myImg" src="Almond.jpg" alt="almonds in factory" width="300" height="200"> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> 

Answer 1

Is this what you need?(Add two buttons in Modal under the enlarged image)

If I misunderstand your question, please tell me, thanks!

Edited

Tips for multiple modal layer:

1. Create new modal div.

2. Set modal div different z-index.

3. Better to make modal div has background to avoid overlaying.

Add showing button to show another modal:

 // Get the modal var modal1 = document.getElementById('myModal1'); var modal2 = document.getElementById('myModal2'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg1 = document.getElementById("img01"); var modalImg2 = document.getElementById("img02"); var captionText1 = document.getElementById("caption1"); var captionText2 = document.getElementById("caption2"); var enlarge = document.getElementById("enlarge"); var close_btn = document.getElementById("close-btn"); var close1 = document.getElementById("close1"); var close2 = document.getElementById("close2"); var show = document.getElementById("show"); img.onclick = function(){ modal1.style.display = "block"; modalImg1.src = this.src; captionText1.innerHTML = this.alt; } show.onclick = function(){ modal2.style.display = "block"; modalImg2.src = modalImg1.src; captionText2.innerHTML = "I'm the new " + captionText1.innerHTML; } // When the user clicks on <span> (x), close the modal close_btn.onclick = function() { modal1.style.display = "none"; }; close1.onclick = function() { modal1.style.display = "none"; }; close2.onclick = function() { modal2.style.display = "none"; }; 

 /* Style the Image Used to Trigger the Modal */ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* 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: transparent; /* Fallback color */ background-color: transparent; /* Black w/ opacity */ } #myModal2 { z-index: 2; /* Sit on top */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption1,#caption2 { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } #buttons { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ #close1, #close2 { position: absolute; top: 15px; right: 35px; color: #000; font-size: 40px; font-weight: bold; transition: 0.3s; } #close1:hover, #close1:focus { color: #bbb; text-decoration: none; cursor: pointer; } #close2:hover, #close2:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } 

 <img id="myImg" src="Almond.jpg" alt="almonds in factory" width="300" height="200"> <!-- The Modal --> <div id="myModal1" class="modal"> <span id="close1">&times;</span> <img class="modal-content" id="img01"> <div id="buttons"> <button id="show">show another</button> <button id="close-btn">close modal</button> </div> <div id="caption1"></div> </div> <!-- The Modal --> <div id="myModal2" class="modal"> <span id="close2">&times;</span> <img class="modal-content" id="img02"> <div id="caption2"></div> </div>