Modal na drugim obrazku

Question

Witam, mam problem, ponieważ, gdy próbuje dodać modal na drugi obrazek na stronie modeluje się tylko pierwszy. Czy jest na to jakiś sposób, aby dwa obrazki mogły się "modalować"?

 

Fragment HTML:

     <div class="prezentacjaproduktu">
      <div class="showprodukt">
         <img id="myImg" src="a.jpg">
	  </div>
      <div id="myModal" class="modal">
        <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption">
		</div>
	   </div>
	  <div class="showproduktmini">
	    <img id="myImg" src="b.jpg">
	  </div>
      <div id="myModal" class="modal">
        <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption">
		</div>
	   </div>

 

Cały CSS:

.prezentacjaproduktu{
	width:40%;
	height: 600px
}
.showprodukt {
	width:90%;
	height:70%;
}
.showprodukt img{
	border-style: solid;
	border-width: 2px;
	margin-left:15%;
		width:100%;
	height:100%;
}
.showproduktmini{
		width:10%;
	height:25%;
}
.showproduktmini img{
	border-style: solid;
	border-width: 2px;
	margin-left:15%;
		width:100%;
	height:100%;
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 50px; /* 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.9); /* Black w/ opacity */
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
	height:90%;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 50px;
}

.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: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

 

Cały JAVASCRPIT:

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;
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
  modal.style.display = "none";
}

 

Answer 1

ID ma być unikatowe, więc kilka elementów nie może posiadać takiego samego ID.

Dodatkowo po co Ci dwa razy modal?

Rozwiązaniem jest nadanie klasy dla elementu, który ma otwierać modal - w twoim przypadku są to obrazki i użycie querySelectorAll + pętla i addEventListener do podpięcia zdarzenia.

Comments

Nie będę kłamał, nie znam się na js,a potrzebny mi jest do tego. Zrobiłem to tak, ale nie wiem jak ma być poprawnie:

var modal = document.querySelectorAll('myModal','myModal1');
modal.addEventListener('click', modifyText, false);

var img = document.querySelectorAll('myImg','myImg1');
img.addEventListener('click', modifyText, false);
var modalImg = document.querySelectorAll("img01","img011");
modalImg.addEventListener('click', modifyText, false);
var captionText = document.querySelectorAll("caption","caption1");
captionText.addEventListener('click', modifyText, false);
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

var span = document.getElementsByClassName("close","close1")[0];
span.addEventListener('click', modifyText, false);

span.onclick = function() { 
  modal.style.display = "none";
}

W html pozamieniałem tylko numeracje drugiego obrazka:

<img id="myImg1" src="2.jpg">
	  </div>
      <div id="myModal1" class="modal">
        <span class="close1" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
        <img class="modal-content" id="img011">
        <div id="caption1">
		</div>
	   </div>

 

---

Polecam na początek poznać podstawy, bez nich ani rusz: http://kursjs.pl/