SimpleModalを使用して、画像をクリックしたときにポップアップビューを作成しています。ビューには、画像のより大きなバージョンと、その画像の他の入力データが含まれます。
問題は、私がドキュメントと少し混乱していて、jQuery/JSにかなり慣れていないことです。
インデックスページにポップアップしたいすべての情報を含む非表示のdivを作成していると仮定します。
layouts / application.html.erb
<head>
<script>
$(document).ready(function() {
$('.photo_container').click(function(e){
$('#basic_modal').modal();
});
});
</script>
</head>
photo / index.html.erb
<% @photos.each do |photo| %>
<div class="photo_container">
<%= image_tag photo.url %>
</div>
<% end %>
<div id="basic_modal">
<p>This is the sample pop up page that will display a bigger image and info.</p>
</div>
画像をクリックするとモーダルがポップアップするようにするにはどうすればよいですか？
編集：本文タグを閉じる直前にスクリプトを移動してみました。