基於收音機選擇的圖像顯示和模式彈出

Question

我有一個腳本，我根據單選按鈕選擇循環各種圖像。這很好地工作，並循環所有這些都沒有問題。

我的問題是，我想有一個模式彈出所有的圖像。這些圖像名稱更改基於上顯示的項目，所以我保存圖像的名字在正大小的數組（陣列

這裏是無線電代碼：。

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

<li class="radio-attribute"> 
<label for="3" class="radio-attribute"> 
<input type="radio" id="3" name="id[27]" value="173" onClick="change_image(this.id)"> 
<img src="images/black_swatch.png" alt="GBM0911BK Black" title=" GBM0911BK Black " width="41" height="40" /> 
</label> 
</li> 

</ul> 

這些按鈕做工精細

的JavaScript如下：

var images = ["GBM0911PL.png","GBM0911R.png"]; 
var modal = document.getElementById('myModal'); 
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=\"myImg\" 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"; 
    } 

模態標記如下：

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

我顯示的圖片是這樣的：

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

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

最後用於模態的CSS：

/* 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%; 
    } 
} 

這僅僅是我從網站複製一個模式https://www.w3schools.com/howto/howto_css_modal_images.asp 得到這個開始。

該模式雖然並沒有彈出窗口，我需要它彈出打開選定的圖像從收音機選擇。

任何幫助，將不勝感激。

Answer 1

這是因爲您的onclick事件偵聽器被設置爲僅當您單擊ID爲#myImg的項目時觸發。你想要的代碼，只要你點擊你的每一個單選框執行，所以我建議通過這些單選按鈕循環：

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

從本質上講，這種循環遍歷每個無線IMG並增加了一個事件偵聽器，點擊它，這然後在全屏視圖中設置SRC並顯示您的目標圖像。

Answer 2

嘗試刪除：

<a href="images/GLAMOURFRONT.jpg"></a> 

我認爲這是防止觸發模式的圖像。