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

您发布的代码中有一些特殊的东西。我首先要解释为什么代码看起来不符合意图：＆＃34;我想要做的是根据设备的宽度改变模态图像的宽度它们将被打开。＆＃34; 之后我将解释为什么目前所有六个缩略图都在zoom6模式中打开，其中有一个id＆＃34; desktopZoom-plus＆＃34;。现在意思是，无论您单击哪个缩略图，或者在哪个设备上查看图像，它都会显示最大宽度为995像素的缩放图像。最后，我将尝试提供解决方案。

代码不符合意图：

现在代码尝试显示六个缩略图，每个缩略图显示不同大小的缩放版本。这与他们查看的设备无关。似乎有意的是有6个缩略图，每个都显示相同大小的缩放版本。尺寸应该与他们正在查看的设备类型相对应。

Javascript问题：

对于所有六个图像，它声明onclick函数如下：

img.onclick = function(){

所有六个图像都用相同的变量引用＆＃39; img＆＃39;。这意味着它会改变每个先前图像的实际onclick功能，每次它给出变量＆＃39; img＆＃39;一个onclick功能。因此，只有最后声明的函数也将应用于所有图像。下面是一个相同的意外行为的例子。如果你点击＆＃39;你好＆＃39;它说＆＃39; bye＆＃39;而不是＆＃39; hello＆＃39;，因为功能已经改变。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在这种情况下，它意味着只会打开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函数通过引用缩略图来恢复src和alt，这是＆＃39;这＆＃39 ;。如果相反它将被声明为＆＃39; img.src＆＃39;，它只会显示最后一个缩略图的缩放版本，尽管你在哪个缩略图舔。

<强> 解决方案

如果我理解正确，你希望所有六个图像基本上具有相同的功能，即打开一个模态框并显示一个更大的（响应）版本。下面我将展示如何在javascript中为所有图像提供此功能。或者，您可以在html中为图像提供onclick功能。

您希望模式框中显示图像的最大宽度具有响应性。这最好用纯css实现，即使用@media规则。有关其工作原理的说明，请访问：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp 我建议将#smartZoom-std中的所有css删除到＃desktopZoom-plus。并用一个id替换它。然后应用@media规则为不同大小的设备设置不同的最大宽度。

请记住，这只是我的看法。可能有更有效的方法或有效的方法。此外，它需要对实际的id /类名进行一些更改，因为只有1个模态框。

<强> Javscript：

让我们假设您将所有图像放在：

中

<div id="thumbnail_wrapper">

以下javascript会这样做（假设您现在只使用一个模式框，其ID为＆＃34;缩放＆＃34; ID为＆＃34的图像; bigImg＆＃34;以及带有id的范围of＆＃34; closeBigImg＆＃34;）：

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，或者只有一个（就像在我的解决方案中一样）。