0

单击图像时，我正在使用SimpleModal创建弹出视图。该视图将包含更大版本的图像以及该图像的其他一些填充数据。

问题是我对文档有点困惑，而且我对 jQuery/JS 还很陌生。

我假设我们正在创建一个隐藏的 div，其中包含我们想要在索引页面上弹出的所有信息。

布局/application.html.erb

<head>
  <script>
    $(document).ready(function() {
        $('.photo_container').click(function(e){
            $('#basic_modal').modal();
        });
    });​

  </script>
</head>

照片/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>

当我单击图像时，如何使模式弹出？

编辑：我尝试将脚本移到结束正文标记之前。

4

3 回答 3

0

您确定您的应用正在加载 SimpleModal js 文件吗？它的 .js 文件位于 vendor/assets/javascripts 中，它在 application.js 文件中有一行供资产管道使用？

于 2015-01-16T00:57:35.360 回答
0

给你的图像一个类别，例如，photo_container.

然后绑定点击使其打开一个modal：

​$(document).ready(function() {
    $('.photo_container').click(function(e){
        $('#basic_modal').modal();
    });
});​
于 2012-09-22T19:01:49.517 回答
0

Use jQuery(function () { instead of $(document).ready(function() {

于 2012-09-23T00:53:19.210 回答