个人中心
gpt4 book ai didi

javascript - 如何在 for 循环中为多个图像创建模态图像？

转载 作者：行者123 更新时间：2023-11-28 02:24:22 25 4
gpt4 key购买 nike

我正在尝试为页面中的多个图像创建一个默认隐藏的模态(对话框)。每当点击模式时，它都会触发显示图像。我在 w3school 代码中发现这个例子如下

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

#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 */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.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: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>

<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// 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 = document.getElementById('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";
}
</script>

</body>
</html>

它只适用于一张图片。假设如果我想对页面中存在的多个图像执行此操作，我该如何实现？在我的 html 文件中，我使用 for 循环在单个页面中显示图像列表，如下所示 

  {% for item in itemslist %}
      <img src="{{url_for('image', path=item.thumb)}}" id="img{{loop.index}}" class="img-thumbnail" alt=""width="100" height="100"/>
{% endfor %}

我怎样才能为所有图像做模态图像。就像这个 image

我找到了这个例子 modal image但这并没有帮助它给出控制台错误，可能是我做错了。帮我解决这个问题。让我知道你是否需要更多的问题

根据答案尝试

{% extends "base.html" %}
{% block content %}

<ul class="list-group">
  {% for item in listitems %}
  <li class="list-group-item d-flex justify-content-between align-items-center">

    <a href="/browse/{{item.href}}" id="item{{loop.index}}">{{item.name}}</a>
    <!--below hyperlink is just a hack for creating a clickable space-->
    <a href="/browse/{{item.href}}" id="blahh{{loop.index}}" style="color:white">{{item.name}}</a>
    {% if item.thumb != "" %}
      <!-- <img src="{{url_for('image', fpath=item.thumb)}}" id="img{{loop.index}}" class="img-thumbnail" alt=""width="300" height="300"/> -->
      <img src="{{url_for('image', fpath=item.thumb)}}" id="img{{loop.index}}" class="clickable" alt=""width="300" height="300"/>
      <div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
    {% endif %}   
  </li>
  {% endfor %}
</ul>
<script>
/* JavaScript */

// define variables to hold the 'modal' Elements
var modal, modalImg, captionText, close;

// Event Handler
function imageClicked(e) {
   // set modal Elements on first click
   !modal && (
        modal = document.getElementById("modal"),
        modalImg = document.getElementById("img01"),
        captionText = document.getElementById("caption"),
        // find the 'close' button and add an event listener
        close = document.getElementsByClassName("close")[0],
        close.addEventListener("click", closeModal, !1)
    );

    // the clicked image
    var clickedImage = e.target;

    // set the Elements in the 'modal' box
    modalImg.src = clickedImage.src;
    captionText.innerHTML = clickedImage.title;
    modal.style.display = "block";
}

// Event Handler
function closeModal(e) {
    modal.style.display = "none";
}

// Finally, add an event listener to
// every image with a class .clickable
[].slice.call(
    document.getElementsByClassName("clickable")
).forEach(function(im) {
    im.addEventListener("click", imageClicked, !1);
});
</script>
{% endblock %}

我最终收到控制台错误 this

最佳答案

我会选择这样的东西。您必须将 onclick 事件绑定(bind)到所有图像。在你的 TWIG 代码中，我将 img-thumbnail 类作为选择器来绑定(bind)所有图像上的 onclick 事件。由于您没有提供完整的演示示例，因此我无法对其进行测试(而且我有点懒惰)。但这是它应该工作的方式。仅替换现有代码。我很确定这应该已经完成​​了这项工作。

// Get the images and bind an onclick event on each to insert it inside the modal
// use its "alt" text as a caption
var images = document.querySelectorAll(".img-thumbnail");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for(let i = 0; i < images.length; i++){
  images[i].onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  }
}

完整的工作示例:

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

// Get the images and bind an onclick event on each to insert it inside the modal
// use its "alt" text as a caption
var images = document.querySelectorAll(".img-thumbnail");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for(let i = 0; i < images.length; i++){
  images[i].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 */
.img-thumbnail{
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.img-thumbnail: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%;
  }
} 
 <!-- Trigger the Modal -->
<img id="myImg1" src="//i.stack.imgur.com/bpLjl.png" class="img-thumbnail" alt="Angular" style="width:100%;max-width:50px">
<img id="myImg2" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a" class="img-thumbnail" alt="Stacky" style="width:100%;max-width:50px">

<!-- 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>

更新:添加了基于原始答案的完整工作示例。

关于javascript - 如何在 for 循环中为多个图像创建模态图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55368866/

25 4 0
文章推荐： css - 如何使固定位置的页脚在调整大小时不覆盖浏览器的所有其他元素？
文章推荐： c++ - 使用 gcov 测试 C++ 程序
文章推荐： html - 响应式背景图片在移动设备尺寸下无法填满整个页面长度
文章推荐： javascript - 如何使用 JavaScript 按字段值对对象数组进行排序？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com