HTML CSS JS具有響應寬度的多個模式圖像

Question

我在同一網頁上實現6個模態圖像時遇到問題。 基本上，據我所知，問題在於它們都從上一個繼承了CSS。 我想要做的是根據將要打開的模態圖像的寬度來更改模態圖像的寬度。 因為這是我第一次使用模式圖像，所以如果我在某個地方犯了錯誤或者我制作的模式不能按我希望的方式工作，我不會知道。

的HTML

<img id="smartphone-std" class="thumbnail1" title="Small Mobile Screenshot" src="../path/img0.png" alt="smartphone screenshot"/>
<img id="tablet-std" class="thumbnail2" title="Tablet Screenshot" src="../path/img1.png" alt="tablet screenshot"/>
<img id="desktop-std" class="thumbnail3" title="Deskop Screenshot" src="../path/img2.png" alt="desktop screenshot"/>
<img id="smartphone-plus" class="thumbnail1" title="Small Mobile Screenshot" src="../path/img3.png" alt="smartphone screenshot"/>
<img id="tablet-plus" class="thumbnail2" title="Tablet Screenshot" src="../path/img4.png" alt="tablet screenshot"/>
<img id="desktop-plus" class="thumbnail3" title="Deskop Screenshot" src="../path/img5.png" alt="desktop screenshot"/>

<div id="zoom1" class="modal">
    <span class="close">&times;</span>
    <div id="caption">To go back, click on the image.</div>
    <img class="modal-content" id="smartphoneZoom-std" />
</div>

<div id="zoom2" class="modal">
    <span class="close">&times;</span>
    <div id="caption">To go back, click on the image.</div>
    <img class="modal-content" id="tabletZoom-std"/>
</div>

<div id="zoom3" class="modal">
    <span class="close">&times;</span>
    <div id="caption">To go back, click on the image.</div>
    <img class="modal-content" id="desktopZoom-std"/>
</div>

<div id="zoom4" class="modal">
    <span class="close">&times;</span>
    <div id="caption">To go back, click on the image.</div>
    <img class="modal-content" id="smartphoneZoom-plus"/>
</div>

<div id="zoom5" class="modal">
    <span class="close">&times;</span>
    <div id="caption">To go back, click on the image.</div>
    <img class="modal-content" id="tabletZoom-plus"/>
</div>

<div id="zoom6" class="modal">
    <span class="close">&times;</span>
    <div id="caption">To go back, click on the image.</div>
    <img class="modal-content" id="desktopZoom-plus"/>
</div>

CSS 400px斷點

我使用了w3school.com上的代碼來學習模態圖像的工作原理，並獲得完全相同的結果。

/*modal*/

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 20px 0;
    height:3%;
}

/* 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) 400px */
#smartphoneZoom-std ,
#tabletZoom-std,
#desktopZoom-std ,
#smartphoneZoom-plus,
#tabletZoom-plus,
#desktopZoom-plus{
    margin: auto;
    display: block;
    width: 100%;
    margin-bottom:30%;
}

/* 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: #ffa500;
    text-decoration: none;
    cursor: pointer;
}

CSS 740px斷點

在此斷點處，設置了智能手機模式的最大寬度，而台式機和平板電腦則繼承自先前的斷點。

/* modal */

/* Modal Content (Image) 740px */
#smartphoneZoom-std {
    max-width: 620px;
}

#smartphoneZoom-plus {
    max-width: 620px;
}

CSS 955px斷點

在此斷點處，將設置平板電腦和台式機模式的最大寬度，而智能手機將繼承自先前的斷點。

/* modal */

/* Modal Content (Image) 955px */
#tabletZoom-std {
    max-width: 800px;
}

#desktopZoom-std {
    max-width: 955px;
}

#tabletZoom-plus {
    max-width: 800px;
}

#desktopZoom-plus {
    max-width: 955px;
}

JAVASCRIPT

如果可能的話，我想知道是否有一種方法可以縮小此腳本，因為此函數總是對不同的圖像執行相同的操作。

window.onload = function(){ 
    /* -- STD -- */

    //zoom1

    // Get the modal
    var modal = document.getElementById('zoom1');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('smartphone-std');
    var modalImg = document.getElementById('smartphoneZoom-std');
    var captionText = document.getElementById('caption');
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
        document.body.style.overflow = "hidden"; //stops the sidebar scrolling
    }

    // 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.body.style.overflow = "auto";
    }

    // Close the modal if the image is clicked
    var bigImg = document.getElementById("smartphoneZoom-std");
    bigImg.onclick = function(){
        modal.style.display = "none";
        document.body.style.overflow = "auto";
    }

    //zoom2

    // Get the modal
    var modal = document.getElementById('zoom2');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('tablet-std');
    var modalImg = document.getElementById('tabletZoom-std');
    var captionText = document.getElementById('caption');
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
        document.body.style.overflow = "hidden"; //stops the sidebar scrolling
    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[1];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
      document.body.style.overflow = "auto";
    }

    // Close the modal if the image is clicked
    var bigImg = document.getElementById("tabletZoom-std");
    bigImg.onclick = function(){
        modal.style.display = "none";
        document.body.style.overflow = "auto";
    }

    //zoom3

    // Get the modal
    var modal = document.getElementById('zoom3');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('desktop-std');
    var modalImg = document.getElementById('desktopZoom-std');
    var captionText = document.getElementById('caption');
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
        document.body.style.overflow = "hidden"; //stops the sidebar scrolling
    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[2];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
      document.body.style.overflow = "auto";
    }

    // Close the modal if the image is clicked
    var bigImg = document.getElementById("desktopZoom-std");
    bigImg.onclick = function(){
        modal.style.display = "none";
        document.body.style.overflow = "auto";
    }

    /* --PLUS-- */

    //zoom4

    // Get the modal
    var modal = document.getElementById('zoom4');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('smartphone-plus');
    var modalImg = document.getElementById('smartphoneZoom-plus');
    var captionText = document.getElementById('caption');
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
        document.body.style.overflow = "hidden"; //stops the sidebar scrolling
    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[3];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
      document.body.style.overflow = "auto";
    }

    // Close the modal if the image is clicked
    var bigImg = document.getElementById("smartphoneZoom-plus");
    bigImg.onclick = function(){
        modal.style.display = "none";
        document.body.style.overflow = "auto";
    }

    //zoom5

    // Get the modal
    var modal = document.getElementById('zoom5');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('tablet-plus');
    var modalImg = document.getElementById('tabletZoom-plus');
    var captionText = document.getElementById('caption');
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
        document.body.style.overflow = "hidden"; //stops the sidebar scrolling
    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[4];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
      document.body.style.overflow = "auto";
    }

    // Close the modal if the image is clicked
    var bigImg = document.getElementById("tabletZoom-plus");
    bigImg.onclick = function(){
        modal.style.display = "none";
        document.body.style.overflow = "auto";
    }

    //zoom6

    // Get the modal
    var modal = document.getElementById('zoom6');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('desktop-plus');
    var modalImg = document.getElementById('desktopZoom-plus');
    var captionText = document.getElementById('caption');
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
        document.body.style.overflow = "hidden"; //stops the sidebar scrolling
    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[5];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
      document.body.style.overflow = "auto";
    }

    // Close the modal if the image is clicked
    var bigImg = document.getElementById("desktopZoom-plus");
    bigImg.onclick = function(){
        modal.style.display = "none";
        document.body.style.overflow = "auto";
    }
}

我希望我已經很好地解釋了這個問題。 提前謝謝大家！

Answer 1

您發布的代碼中有幾項奇特的事情。 我將首先解釋為什么代碼似乎不符合意圖： “我想做的就是根據將打開模態圖像的設備的寬度來更改模態圖像的寬度。” 之后，我將解釋為什么當前所有六個縮略圖都以id為“ desktopZoom-plus”的zoom6模式打開。 現在的意思是，無論您單擊哪個縮略圖，或者在哪個設備上查看圖像，它都會顯示最大寬度為995px的縮放圖像。 最后，我將嘗試提供一個解決方案。

該代碼不符合意圖：

現在，代碼嘗試顯示六個縮略圖， 每個縮略圖顯示一個不同大小的縮放版本。 這與查看它們的設備無關。 似乎有意義的是有6個縮略圖， 每個縮略圖顯示相同大小的縮放版本 。 大小應與正在查看它們的設備類型有關。

JavaScript問題：

對於所有六個圖像，它聲明onclick函數，如下所示：

img.onclick = function(){

用相同的變量“ img”引用所有六個圖像。 這意味着，每當它給變量'img'一個onclick函數時，它就會更改每個先前圖像的實際onclick函數。 因此，只有最后一個聲明的函數才會應用於所有圖像。 下面是相同意外行為的示例。 如果單擊“ hello”，它會顯示“ bye”而不是“ hello”，因為功能已更改。

 var clickable_div = document.getElementById("hello"); clickable_div.onclick = function() { alert(clickable_div.innerHTML); } var clickable_div = document.getElementById("bye"); clickable_div.onclick = function() { alert(clickable_div.innerHTML); } 

 body div { width: 60px; height: 30px; line-height: 30px; text-align: center; margin-bottom: 10px; cursor: pointer; } #hello { border: 1px solid green; } #bye { border: 1px solid red; } 

 <div id="hello"> hello </div> <div id="bye"> bye </div> 

在這種情況下，這意味着將僅打開zoom6模態。 所有圖像具有完全相同的功能：

img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
    document.body.style.overflow = "hidden"; //stops the sidebar scrolling
}

他們將顯示zoom6模態。 然后使用單擊的縮略圖的src和alt更新zoom6模式圖像。 最后，它將溢出更改為隱藏。

也許很有趣，但是有些不相關：該函數使用了單擊的縮略圖的正確src和alt，因為onclick函數通過將縮略圖稱為“ this”來檢索src和alt。 如果改為將其聲明為'img.src'，則即使您單擊了哪個縮略圖，它也只會顯示最后一個縮略圖的縮放版本 。

解

如果我理解正確，則希望所有六個圖像基本上具有相同的功能，即打開一個模式框並顯示一個較大的（響應）版本。 下面，我將展示如何在javascript中為所有圖像提供此功能。 或者，您可以為圖片提供html中的onclick函數。

您希望模式框中顯示的圖像的最大寬度能夠響應。 這是使用純CSS最好實現的，即使用@media規則。 有關其工作原理的說明，請參見： https ://www.w3schools.com/cssref/css3_pr_mediaquery.asp我建議將所有CSS從＃smartphoneZoom-std刪除到＃desktopZoom-plus。 並將其替換為單個ID。 然后應用@media規則為不同大小的設備設置不同的最大寬度。

請記住，這只是我的看法。 可能有更有效的方法或有效的方法。 同樣，由於只應有1個模式框，因此需要對實際ID /類名稱進行一些更改。

字幕：

假設您將所有圖像都放在一個：

<div id="thumbnail_wrapper">

然后，以下JavaScript會執行此操作（假設您現在僅使用一個模式框，其ID為“縮放”，ID為“ bigImg”的圖像，跨度為“ closeBigImg”的圖像）：

var thumbnail_wrapper = document.getElementById("thumbnail_wrapper");
var thumbnails_array = thumbnail_wrapper.getElementsByTagName("img");
for(var loop = 0; loop < thumbnails_array.length; loop++)
{
  var thumbnail = thumbnails_array[loop];
  thumbnail.setAttribute("onclick", "open_the_modal(this);");
}

// the variables
var modal = document.getElementById('zoom'); // there should only be 1
var modalImg = document.getElementById('bigImg');
var captionText = document.getElementById('modal_caption');
var bigImg = document.getElementById('bigImg');
var span = document.getElementsById('closeBigImg'); 

function open_the_modal(this)
{
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
  document.body.style.overflow = "hidden";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
  document.body.style.overflow = "auto";
}

// Close the modal if the image is clicked
bigImg.onclick = function(){
    modal.style.display = "none";
    document.body.style.overflow = "auto";
}

注意：在您的初始代碼中，模式框內的標題均具有相同的ID。 一個id應該是唯一的，所以它應該是一個類而不是id，或者應該只有一個（例如在我的解決方案中）。