Twitter引导模式未显示正确的图像答案

【问题标题】：Twitter bootstrap modal not showing correct imageTwitter引导模式未显示正确的图像
【发布时间】：2013-02-24 13:08:24
【问题描述】：

我在显示点击查看的特定图像的模式时遇到问题。

如果我使用带有类的链接，它将以单独的模式显示该相册中的所有图像（必须将它们全部关闭）。我想为单击“查看”的图像显示适当的模式，以便它是对应的。

如果我将此设置为 id 并在顶部 div 中创建一个 id，它将仅显示相册中的第一张图片，无论我点击什么图片。

我该如何解决这个问题？

<a class="btn btn-link" href=".modal" data-toggle="modal"><i class="icon-fullscreen"></i>     View</a>

<!--POP OVER OF IMAGE-->
<div class="modal hide fade"  tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 id="myModalLabel">Pansnap</h3>

</div>
<div class="modal-body">

<!--This is for the 360 viewer-->

<?php echo '<img src="uploads/', $image["album"], '/', $image["id"], '.',     $image["ext"],'"/>'?>

<!--360 viewer end-->

  </div>
  <div class="modal-footer">
 <?php echo '<a class="btn btn-link" href="uploads/', $image["album"], '/', $image["id"],     '.', $image["ext"],'">Download</a>'?>

  </div>
</div>

【问题讨论】：

您的示例代码没有多个或所以很难说，但我的第一个猜测是您需要使每个 ID 名称唯一。你能提供更多你的代码吗？

标签： css twitter-bootstrap modal-dialog href

【解决方案1】：

解决此问题的一种方法是在每个链接上存储各种独特的数据组件，然后使用通用处理程序将这些数据加载到单个模式的相关元素中。

例如，类似于以下内容的内容：

HTML

<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/01.jpg" data-download="uploads/album/01.jpg"><i class="icon-fullscreen"></i>     View</a>
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/02.jpg" data-download="uploads/album/02.jpg"><i class="icon-fullscreen"></i>     View</a>

<!--POP OVER OF IMAGE-->
<div id="imageModal" class="modal hide fade"  tabindex="-1">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3 id="myModalLabel">Pansnap</h3>
  </div>
  <div class="modal-body">
    <img id="snap"/>
  </div>
  <div class="modal-footer">
      <a id="download" class="btn btn-link">Download</a>
  </div>
</div>

您可以通过 PHP 将每个图像的数据加载到数据属性中。

JS

$(document).on('click.modal.image-data', '[href=#imageModal]', function () {
  $('#snap').attr('src',$(this).data('image'))
  $('#download').attr('href', $(this).data('download'))  
})

这将在模态元素中加载适当的数据。

JSFiddle

【讨论】：