Question

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

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

如果我将此设置为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>

Answer 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'))  
})

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

Twitter引导模式没有显示正确的图像

1 个答案:

HTML

JS

JSFiddle