在 Rails 项目中设置 SimpleModal答案

【问题标题】：Setting up SimpleModal in a Rails Project在 Rails 项目中设置 SimpleModal
【发布时间】：2012-09-22 18:55:00
【问题描述】：

当我单击图像时，我正在使用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>

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

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

【问题讨论】：

标签： jquery ruby-on-rails ruby-on-rails-3 modal-dialog simplemodal

【解决方案1】：

给你的图片一个类，例如，photo_container。

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

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

【讨论】：

我必须在任何地方添加 link_to 标签吗？我将您的代码放在了开始和结束脚本标记之间，但我无法单击图像以显示模式。
抱歉，我在代码中有错字。（基本模态而不是基本模态）

【解决方案2】：

使用jQuery(function () { 而不是$(document).ready(function() {

【讨论】：

【解决方案3】：

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

【讨论】：