2 buttons side by side under my enlarged image

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>

try this https://codepen.io/ajanth2012/pen/MXaPpp – Ajanth Jun 05 '18 at 07:40 — Ajanth, Jun 05 '18 at 07:40

Terry Wei · Answer 1 · 2018-06-05T07:53:39.100

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:

Create new modal div.
Set modal div different z-index.
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>

Thanks a mil Terry, works fantastic! One probelm though, is there any way for the popup to appear full screen, I am working with wpbakery. So it only opens to the size of the "row" not the screen. Your legend lol — OverReactor, Jun 05 '18 at 09:25
here's one example: https://stackoverflow.com/questions/18432394/how-to-make-twitter-bootstrap-modal-full-screen — Terry Wei, Jun 05 '18 at 09:32
a modal div put under body can show 100% width 100%height to fulfill full screen — Terry Wei, Jun 05 '18 at 09:33
Sweet, works... Thanks a mil again Terry really appreciate the help, problem is, I need this to work on my image and when I duplicate the html part, the image wont click to enlarge. Would really appreciate the help. — OverReactor, Jun 05 '18 at 11:11
You should let all of your images binding the click event, and notice that the id should not be duplicated. If you need to add images dynamically, make sure they indeed bind event too. — Terry Wei, Jun 06 '18 at 00:33

2 buttons side by side under my enlarged image

1 Answers1