如何在图像点击时在同一页面上的多个图像上使用引导模式？答案

【问题标题】：How to use bootstrap modal on multiple images on same page on image click?如何在图像点击时在同一页面上的多个图像上使用引导模式？
【发布时间】：2015-11-21 02:14:31
【问题描述】：

我在页面上有大约 18 张图片，我试图在单击图片时以模态显示更大，但每次只显示第一张图片。

我尝试过使用$(this).find('img') 遍历 DOM，我也尝试过使用孩子们也尝试过将图像设置为不同的 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) 应该在您的元素上使用一次且仅一次。
我尝试了唯一 ID，但没有成功，所以出于绝望，我尝试将它们设置为相同的匹配大小图像。我只使用一种模式，所以根据我看到的另一种解决方案，将数据目标命名为相同是正确的方法。当然，该解决方案对我不起作用。在为此工作了 10 个小时之后，描述性名称不再是优先事项。也许你有一些有用的建议。
可能要考虑使用影子盒库
@KirstinWalsh，如果您还没有弄清楚，请查看下面的答案

标签： javascript jquery html bootstrap-modal

【解决方案1】：

你非常接近你的目标，你有 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);
        });
    });
});

Fiddle

或者你可以只使用引导模式event函数，不太复杂更好的方法（推荐解决方案）

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

Fiddle

【讨论】：

我已经根据您对类似问题的回答尝试了第二种方法。模态显示为空白（显示图像所在位置的轮廓，我可以使用宽度和高度调整轮廓大小，但没有图像）。另外，我把js注释掉了，模态还是继续弹出。这怎么可能呢？但是，我尝试了您建议的新 js，到目前为止，我的第一组图片非常漂亮。不知道我做错了什么，但非常感谢！

【解决方案2】：

你的意思是你有18张图片，当你点击一张图片时，网站会打开一个打开显示更大的图片？

那么你为什么不使用另一个插件，例如Nivo lightbox，它允许你打开一个弹出窗口来显示图像，即使在打开一个弹出窗口时将你所有的图像都放在一个画廊中

【讨论】：

【解决方案3】：

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

这是一个 Jsfiddle 示例： How to show multiple images on the same modal

还有代码：

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

【讨论】：

谢谢，但我不想在一个模态中显示我的所有图片，一次只显示一张独特的图片
是的，我明白了，这个脚本可以在模态中一次显示一个独特的图像。对不起，如果没有第一次解释我。

【解决方案4】：

正常图像路径可以正常工作，但我有 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>

【讨论】：