3

クリックして表示した特定の画像のモーダルを表示できません。

クラスとのリンクを使用すると、そのアルバム内のすべての画像が別々のモーダルで表示されます（すべてを閉じる必要があります）。「表示」をクリックした画像に適切なモーダルを表示して、対応するようにします。

これを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>
4

1 に答える 1

0

これにアプローチする 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

于 2013-03-23T16:35:25.783 に答える