logo标签列表

如何在同一页上使用Bootstrap模态框来处理多个图片的点击事件？

javascriptjqueryhtmlbootstrap-modal
3
我在页面上有大约18张图片，我想在点击图片时以模态框的形式显示它们，但每次都只显示第一张图片。
我尝试使用 $(this).find('img') 遍历DOM，也尝试了使用children。我还尝试将图像设置为不同的id并将其设置为变量。
我的当前尝试是将小图像的路径设置为与大图像的路径相同的id，然后使用find。目前我只设置了前两张图片，因为我还无法使它正常工作。
顺便说一下，我尝试过其他放大和弹出窗口的方法以及插件，但都没有成功，这是我最接近能工作的东西。
注意：另外有一个问题展示了几乎相同的问题，但那里的答案对我没有用。
<img  height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='~/Content/MyPics/TextDollarPart1.JPG' alt='Text dollar code part one.' />  
<div id="myModal" class="modal fade" >
    <div class=" modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img id="1"src="~/Content/MyPics/TextDollarPart1.JPG" class="img-responsive" height="1500" width="1000">
            </div>
        </div>
    </div>
</div>   
<img  height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src="~/Content/MyPics/TextDollarPart2.JPG" alt="Text dollar code part two." />
<div id="myModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img id="2" src="~/Content/MyPics/TextDollarPart2.JPG" class="img-responsive" height="1500" width="1000">
            </div>
        </div>
    </div>
</div>

脚本

$(document).ready(function () {       
    $('img').on('click', function () {
        var picID = $(this).attr('id');
         $(this).find('picID');
        $('picID').modal('toggle');      
    });
});
您不能重复使用同一个ID。此外，最好使用更具描述性的ID，例如image-2、modal-2等。您所拥有的ID（myModal、1、2）应该仅在元素上使用一次。 - Clay
我尝试过使用唯一的ID，但它没有起作用，所以出于绝望，我尝试让匹配的小图像和大图像具有相同的ID。我只使用了一个模态框，所以根据我看到的其他解决方案，将data-target命名为相同的名称是正确的方法。当然，这个解决方案对我来说并不起作用。在处理了10个小时后，描述性名称并不是优先考虑的事情。也许你有一些有用的建议。 - Kirstin Walsh
可能考虑使用阴影框库。 - Dan Beaulieu
@KirstinWalsh，如果你还没有想明白，可以查看下面的答案。 - Shehary
4个回答
18
你离目标很近，你有2张图片。
<img height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" src='http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png' alt='Text dollar code part one.' />
<img height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" src='http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png' alt='Text dollar code part one.' />

一个模态框
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img class="img-responsive" src="" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

如果您想使用click函数以您的方式在模态框中显示图像
$(document).ready(function () {
    $('img').on('click', function () {
        var image = $(this).attr('src');
        $('#myModal').on('show.bs.modal', function () {
            $(".img-responsive").attr("src", image);
        });
    });
});

小提琴

或者您可以仅使用Bootstrap模态框event功能，这种方法更简单且更好（推荐解决方案）

$(document).ready(function () {
        $('#myModal').on('show.bs.modal', function (e) {
            var image = $(e.relatedTarget).attr('src');
            $(".img-responsive").attr("src", image);
        });
});

小提琴

我按照你对类似问题的回答尝试了第二种方法。模态框出现为空白（显示图像应该在的轮廓，我可以通过宽度和高度调整轮廓大小，但没有图像）。此外，我注释掉了js，但模态框仍然会弹出。这怎么可能？但是，我尝试了你建议的新js，到目前为止，我的第一组图片非常漂亮。不知道我做错了什么，但非常感谢！ - Kirstin Walsh
1

我正在学习英语，所以不确定是否完全理解，但如果您想要的是通过单击每个缩略图图像在模态框中显示不同的图像，则认为此代码可以帮助您。

这里是一个Jsfiddle示例： 如何在同一模态框中显示多个图像

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
    <style type="text/css">
      .my-img a {
        display: inline-block;
        margin: 10px;
        border: 2px solid #CCC;
      }
      .my-img a:hover {
        border: 2px solid #45AFFF;
      }    
      .modal-lg {
        width: 86%;
      }
      .modal-body {
        overflow: auto;
        max-height: auto;
      }
    </style>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <div class="row">
    <div class="col-xs-12 my-img">
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="1.png" id="img1" class="img-responsive" width="250px">
      </a>
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="2.png" id="img2" class="img-responsive" width="250px">
      </a>
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="3.png" id="img3" class="img-responsive" width="250px">
      </a>
      <a href="#" id="link1" data-toggle="modal" data-target="#myModal">
        <img src="4.png" id="img4" class="img-responsive" width="250px">
      </a>          
  </div>  

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">your image title here (can be dynamic) </h4>
        </div>
        <div class="modal-body" id="showImg">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>
<script type="text/javascript">
      $(document).ready(function() {
        $('img').on('click', function() {
          $("#showImg").empty();
          var image = $(this).attr("src");
          $("#showImg").append("<img class='img-responsive' src='" + image + "' />")
          //alert(image);
        })
      });
</script>

</body>
</html>
谢谢，但我不想在一个模态框中显示所有我的图片，只想一次显示一张独特的图片。 - Kirstin Walsh
是的，我明白了，这个脚本可以在模态框中一次显示一张独特的图片。如果第一次没有解释清楚，我很抱歉。 - Quethzel Díaz
1
你的意思是你有18张图片，当你点击一张图片时，网站会打开一个页面显示更大的图片？
那么为什么不使用另一个插件，如 Nivo lightbox，它允许您打开一个弹出窗口来显示图片，并且即使在打开弹出窗口时也可以将所有图片放在一个画廊中。
0

对于普通的图像路径，它可以正常工作，但是对于base64图像，这个JavaScript无法工作。

<img src="<?php echo 'data:image/'.$imageFileType.';base64,'.$fetch_expance['expance_image'];?>" style="cursor: pointer;" data-toggle="modal" data-target="#myModal" width="100px" height="100px" /><br>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接