Question

我在点击图片时使用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>

如何点击图片时弹出模态？

编辑：我尝试将脚本移动到我的结束体标记之前。

Answer 1

为您的图片添加课程，例如photo_container。

然后绑定点击以使其打开模态：

$(document).ready(function() {
    $('.photo_container').click(function(e){
        $('#basic_modal').modal();
    });
});

Answer 2

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

在Rails项目中设置SimpleModal

2 个答案: