複数画像のモーダル画像を開く方法

Question

w3schoolsサイトで私はダイアログボックス/ポップアップウィンドウのチュートリアルを見つけました。私はより多くの画像でこれを実装したいと思います。

私のコード：コードは、1枚の画像のために働いている

#myImg { 
    cursor: zoom-in; 
    transition: 0.3s; 
    } 

    #myImg:hover { 
    opacity: 0.7; 
    } 

    .modal { 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 60px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.8); 
    } 

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

    .close { 
    position: absolute; 
    top: 15px; 
    right: 35px; 
    color: #f1f1f1; 
    font-size: 50px; 
    font-weight: bold; 
    transition: 0.3s; 
    } 

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

：

<img onclick="openModal()" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400"> 

<!-- Modal --> 
<div id="myModal" class="modal"> 
    <!-- Close button --> 
    <span class="close">&times;</span> 
    <!-- Modal content --> 
    <img class="modal-content" id="modal-image"> 
</div> 

<script type="text/javascript"> 
    var modal = document.getElementById('myModal'); 
    var img = document.getElementById('myImg'); 
    var modalImg = document.getElementById('modal-image'); 

    function openModal() { 
     modal.style.display = "block"; 
     modalImg.src = this.getAttribute("data-highres"); 
    } 

    /*img.onclick = function() { 
    modal.style.display = "block"; 
    modalImg.src = this.getAttribute("data-highres"); 
    }*/ 

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

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

    window.onclick = function() { 
    if(event.target == modal) { 
     modal.style.display = "none"; 
     } 
    } 
</script> 

CSS。だから関数openModal（）を追加し、前のコードの一部をコメント解除します。しかし、今は、イメージなしでモーダルを開く1つのイメージでも機能しません。

はあなたの助けコンソールにエラーが Uncaught ReferenceError: openModal is not definedある

Answer 1

していただきありがとうございます。これは、関数が定義されていないスコープで実行されたことを意味します。簡単な修正は、ウィンドウのように、グローバルスコープでそれを定義するには、次のようになります。

window.openModal = function(img) { 
    modal.style.display = "block"; 
    modalImg.src = img.getAttribute("data-highres"); 
} 

、その後

<img onclick="openModal(this);" src="low/dn-64.jpg" data-highres="high/dn-64.jpg" width="300" height="400"> 

---

ただし、（W3Schoolsのもうonclickの使用しないを使用してはならないビットです古い今）this answer saysのように。

あなたがしたいことは、画像にイベントリスナーを添付することです。すべての画像をループし、addEventListener('click' ...)を使用して、クリックされたときに聴くことができます。

var images = document.querySelectorAll('img'); 
for(var i=0, len = images.length; i < len; i++){ 
    images[i].addEventListener('click', openModal); 
}