ラジオボタンの選択に基づくモーダルポップアップ

Question

私はこれを非常に近くにしていますが、それほどありません。私が探しているのは、ラジオボタンの選択に基づいて画像を循環させることです。これはうまくいきます。画像のクリックでモーダルポップアップが欲しいので、ラジオ選択1を選択すると、画像1が表示され、ラジオオプションと同様にモーダルにクリック可能です。繰り返しますが、これはうまくいきます。ラジオボタンの画像に基づいてモーダルポップアップがありません。

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

ラジオボタン（簡略化）以下の通りである：

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

とJavaScriptが以下の通りである：

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

とHTMLをここ

が使用CSSあります画像表示用：

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

モーダルため

とHTML：

<!-- 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> 

現在とすぐにラジオ画像をクリックすると、モーダルは、（画像アレイに格納されている）画像なしで、開きます。これは長年のことであり、解決策にとても近いところです。

ありがとうございました。

Answer 1

モーダルはあなたが明示的modal.style.display = "block";を使用してイベントリスナーでその行動を呼び出しているので、ラジオボタンをクリックしたときにポップアップ表示：

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

私が見たもう一つの問題は、あなたが画像を切り替えるときに破壊しているということですchange_imageに電話すると画像上でモーダルモーダルを起動するイベントリスナーです。 imgタグを置き換えると、新しいimgは同じimg.onclickハンドラを持たないことになります。 InnerHTMLの代わりにimgタグをラップする<a>タグも置き換えていません。

あなたの代わりにpiGal要素であなたのリスナーを置くことができると周りを取得するには：また

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

をあなたのHTML onClickにonclickする必要があります。