在單擊圖像上打開模態（使用單個模態的多個圖像）

Question

我正在嘗試為我的網頁創建一個照片頁面，單擊圖像后我想打開一個模式以全屏查看圖像（更多或更少）。 我發現本教程使用模態放大圖像 - https://www.w3schools.com/howto/howto_css_modal_images.asp

但是，鑒於頁面上有多個圖像並且只有一個模態，我不確定是否有一種更簡單的方法可以在單擊時放大圖像。

是為每個圖像創建單獨 ID 的唯一方法還是 JS 中的選擇器可以一次選擇多個圖像？

這是 JSfiddle - https://jsfiddle.net/definaly/89roukqd/2/

 // Get the modal var modal = document.getElementById("myModal"); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = $(".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; } // 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"; }

 /* 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 { animation-name: zoom; animation-duration: 0.6s; } @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%; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Trigger the Modal --> <img class="myImg" src="https://picsum.photos/300/300?random=1" alt="Snow" style="width:100%;max-width:300px"> <img class="myImg" src="https://picsum.photos/300/300?random=2" alt="Snow" style="width:100%;max-width:300px"> <img class="myImg" src="https://picsum.photos/300/300?random=3" alt="Snow" style="width:100%;max-width:300px"> <!-- The Modal --> <div id="myModal" class="modal"> <!-- The Close Button --> <span class="close">&times;</span> <!-- Modal Content (The Image) --> <img class="modal-content" id="img01"> <!-- Modal Caption (Image Text) --> <div id="caption"></div> </div>

提前致謝

Answer 1

我做了很多更改以利用 jQuery 並抽象出 ID。 隨意詢問其中任何一個。

演示

// Get the modal
var modal = $("#myModal");
var modalImg = modal.find('.modal-content');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $(".myImg");
var captionBox =$("#caption");

img.click(function() {
    modalImg.attr('src', $(this).attr('src'));
    captionBox.text( $(this).attr('alt') );
    modal.show();
});

// Get the elements that closes the modal
var modalCloser = $(".close");

// When the user clicks on the close element, close the modal
modalCloser.click(function() {
    modal.hide();
});

一些一般性建議：

• 使用語義變量名稱。 如果您將某些東西稱為“跨度”並更改標記中的元素類型，那么您現在會遇到不匹配的情況。 相反，使用描述其功能的名稱。

• 在諸如開啟器或關閉器之類的東西上設置處理程序時，請使用抓取多個元素的 jQuery 類選擇器。 通過這種方式，您可以從多個地方打開和關閉。

• 了解所有 jQuery 的常用方法。 它們會為您節省很多打字的時間，而且我發現它們非常直觀，只需很少的努力就可以記住它們。

• JS 使用單引號，HTML 使用雙引號。 這消除了在將一個嵌套到另一個中時逃避它們的大多數需要。 jQuery 文檔對所有內容都使用 double ，但見鬼去吧。

• 考慮遷移到let和const而不是var 。 范圍更精確，現代 IDE 不會不斷建議您這樣做。

Answer 2

我剛剛用 HTML 和 JS 修改了您的代碼。

這是演示鏈接 -演示

---

在 HTML 代碼中添加 Onclick 功能

<img class="myImg" src="https://picsum.photos/300/300?random=1" alt="Snow" onclick="image(event)" style="width:100%;max-width:300px" />

<img class="myImg" src="https://picsum.photos/300/300?random=2" alt="Snow" onclick="image(event)" style="width:100%;max-width:300px" />

<img class="myImg" src="https://picsum.photos/300/300?random=3" alt="Snow" onclick="image(event)" style="width:100%;max-width:300px" />

在 JS 代碼中添加了相同的功能。

// Get the modal
    var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    // var img = $(".myImg");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    function image(event)  {    
        modal.style.display = "block";
        modalImg.src = event.target.src;
        captionText.innerHTML = event.target.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";
    }