我在同一网页上实现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">×</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">×</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">×</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">×</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">×</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">×</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";
}
}
我希望我已经很好地解释了这个问题。提前谢谢大家！
最佳答案
您发布的代码中有几项奇特的事情。我将首先解释为什么代码似乎不符合意图：“我想做的就是根据打开模态图像的设备的宽度来更改模态图像的宽度。”然后，我将解释为什么当前所有六个缩略图都以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，或者应该只有一个（例如在我的解决方案中）。
关于javascript - HTML CSS JS具有响应宽度的多个模式图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47370150/