Modal Popup basierend auf Radiobutton Auswahl

Question

Ich habe dies sehr nahe, aber nicht ganz. Was ich suche, ist Bilder auf der Grundlage einer Radio-Button-Auswahl zu radizieren, das funktioniert gut. Ich möchte auch ein Modal Pop-up auf Klick auf das Bild, wenn ich also Radio-Auswahl 1, Bild 1 zeigt und anklickbar zu einem Modal, ähnlich für jede andere Radio-Option. Auch das funktioniert gut. Was nicht ist, ist das modale Pop-up basierend auf dem Radio-Button-Bild. Hier

ist die CSS verwendet:

#piGal ul { 
    float: left; 
    list-style-type: none; 
    padding: 20px 2em 3em 2em; 

} 
#piGal img { 
    max-width: 100%; 
    height: auto; 
    padding: .5em .5em 2em .5em; 
} 
#piGal .outer { 
    float: left; 
    padding-bottom: 5px; 
} 



#piGalImg img { 
    max-width: 100%; 
    height: auto; 
    -webkit-box-shadow: 0px 0px 1px #000; 
    -moz-box-shadow: 0px 0px 1px #000; 
    padding-bottom: 5px; 
} 


#piGalImg .outer { 
    float: left; 
    padding-bottom: 5px; 
} 



/* 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: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
} 

/* Modal Content (Image) */ 
.modal-content { 
    margin: auto; 
    display: block; 
    width: 80%; 
    max-width: 700px; 
} 

/* Caption of Modal Image (Image Text) - Same Width as the Image */ 
#caption { 
    margin: auto; 
    display: block; 
    width: 80%; 
    max-width: 700px; 
    text-align: center; 
    color: #ccc; 
    padding: 10px 0; 
    height: 150px; 
} 

/* Add Animation - Zoom in the Modal */ 
.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; 
} 

/* 100% Image Width on Smaller Screens */ 
@media only screen and (max-width: 700px){ 
    .modal-content { 
     width: 100%; 
    } 
} 

Der Radiobutton (vereinfacht) wird wie folgt:

<div class="contentText"> 
<section> 
<h5>Choose color</h5> 
<ul id="radio-attribute" class="radio-attribute">   
<li class="radio-attribute"> 
<label for="1" class="radio-attribute"> 
<input type="radio" id="1" name="id[27]" value="170" onClick="change_image(this.id)"> 
<img src="images/silver_swatch.png" alt="GBM0911S Silver" title=" GBM0911S Silver " width="42" height="40" /> 
</label> 
</li> 

<li class="radio-attribute"> 
<label for="2" class="radio-attribute"> 
<input type="radio" id="2" name="id[27]" value="175" onClick="change_image(this.id)"> 
<img src="images/blue_swatch.png" alt="GBM0911B Blue" title=" GBM0911B Blue " width="45" height="40" /> 
</label> 
</li> 
</ul>  
</section> 
</div> 

Und die JavaScript ist wie folgt:

<script type="text/javascript"> 
    <!-- 

var images = ["GLAMOURFRONT.jpg","GBM0911S.png"]; 

function preload(arrayOfImages) { 
     $(arrayOfImages).each(function() { 
      $('<img />').attr('src',this).appendTo('body').css('display','none'); 
     }); 
    } 

    preload(images); 

    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("piGal"); 
    var captionText = document.getElementById("caption"); 

     function change_image(radioID) { 
      document.getElementById("piGal").innerHTML = "<img id=\"piGal\" src=\"images/"+ images[radioID] +"\" />"; 
     } 

    // Get the modal 

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

    document.querySelectorAll('label.radio-attribute img').forEach(function (radioClick) { 
     radioClick.addEventListener("click", function() { 
     modal.style.display = "block"; 
     modalImg.src = this.src; 
     captionText.innerHTML = this.alt; 
     }); 
    }); 
    //--> 
    </script> 

Und html für die Bildanzeige:

<div id="piGal" style="float: left;"> 

     <a href="/images/GLAMOURFRONT.jpg"><img src="images/GLAMOURFRONT.jpg" alt="image" title=" image " width="225" height="184" id="myImg" /></a> 

</div> 

und HTML für die modal:

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- The Close Button --> 
    <span class="close" onclick="document.getElementById('piGal').style.display='none'">&times;</span> 
    <!-- Modal Content (The Image) --> 
    <img class="modal-content" id="piGal"> 
    <!-- Modal Caption (Image Text) --> 
    <div id="caption"></div> 
    </div> 

zur Zeit, sobald der Funk Bild geklickt wird, öffnet sich das modale oben, ohne dass das Bild (in der Bildanordnung gespeichert). Schon lange dabei und bin so nah an einer Lösung ....

danke.

Answer 1

Die Modal erscheint, wenn Sie auf das Optionsfeld klicken, weil Sie mit modal.style.display = "block"; dieses Verhalten in Ihren Event-Listener explizit sind Aufruf:

document.querySelectorAll('label.radio-attribute img').forEach(function (radioClick) { 
     radioClick.addEventListener("click", function() { 
     modal.style.display = "block"; <-- Remove this line here. 
     modalImg.src = this.src; 
     captionText.innerHTML = this.alt; 
     }); 
    }); 

Ein weiteres Problem, das ich sah, ist, dass, wenn Sie Bilder wechseln zu zerstören Sie Der Ereignis-Listener, der den modalen Bild-Klick startet, wenn Sie change_image aufrufen. Das Ersetzen des Tags img bedeutet, dass der neue img nicht den gleichen Handler hat. Sie ersetzen auch nicht das <a>-Tag, das das img-Tag umschließt, wenn Sie das InnerHTML ersetzen.

Um das zu umgehen, dass Sie Ihre Zuhörer auf dem piGal Element setzen könnte statt:

document.getElementById("piGal").onclick = function(){ 
    // You'll have to update this to target the image as a child of piGal. 
    } 

auch in Ihrem HTML onClickonclick sein sollte.