Search code examples
jqueryruby-on-railsruby-on-rails-3modal-dialogsimplemodal

Setting up SimpleModal in a Rails Project

I am using SimpleModal to create a pop-up view when I click on an image. The view will contain a bigger version of the image as well as some other populated data for that image.

The problem is that I am a bit confused with the documentation and I'm fairly new to jQuery/JS.

I assume that we're creating a hidden div with all the information we want to pop up on the index page.

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>

How do I make it so that a modal pops up when I click on the image?

Edit: I tried moving the script to right before my closing body tag.

Solution

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