Calling function in JavaScript at the wrong time

Navigation
0

Good night, I'm trying to create a page that displays an image in a modalBox with the zoom function, but I'm facing the problem that even if you click outside the image thumbnail, the zoom function is running, solve? The code is below: 

<span class='zoom' id='ex3'>
   <img id="myImg" src="http://t.wallpaperweb.org/wallpaper/nature/1920x1200/Trolltunga_Odda_Norway.jpg"alt="Trolltunga, Norway" width="300" height="200">
   <p>Hover</p>
</span>


<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <div class="zoom">
    <img class="modal-content" id="img01" width=300 height=300>
  </div>


  <div id="caption"></div>
</div>

$(function(){
var modal = document.getElementById('myModal');
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;
    $('.zoom').zoom({
      on: 'click',
      url: this.src
    });
  }
  // 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";
 }
})
    
asked by anonymous 01.02.2017 / 01:35

1 answer

1

You have the bootstrap classes in the wrong order; modal-content is what encompasses the content of the modal, while zoom is what is encompassed by modal-content and encompasses the image.

You also have a class in img that gives you the power of modal-content, which is not right.

change html from modal content to 

  <div class="modal-content">
    <div class="zoom">
      <img id="img01" class="pre-zoom">
    </div>
  </div>

and add the CSS: 

.pre-zoom {
  margin:0 auto;
  width: 100%;
  max-width: 700px;
}
    
01.02.2017 / 01:48
Prompt in javascript does not redirect Problems selecting