README.md

This is a Rails 3.1 adaptation of an answer to a StackOverflow question regarding using jQuery to display AJAX-retrieved content in a modal. Here is the original answer:

http://stackoverflow.com/questions/5766055/jquery-modal-windows-and-edit-object/5766232#5766232

_modal.html.erb

<div id="modal-container"></div>
<div id="modal">
  <a href="#" class="close">close</a>
</div>

_modal.scss

// This partial should be @imported into your layout Sass file, or included via the Asset Pipeline
//

#modal-container {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
}

#modal {
  display: none;
  position: absolute;
  width: 600px;
  left: 50%;
  margin-left: (-600px - 40px) / 2;
  padding: 20px;
  background: #fff;
  border: 5px solid #eee;

  & > .close {
    position: absolute;
    right: 5px;
    top: 5px;
    color: #666;
    &:hover, &:active {
      color: #000;
    }
  }
}

application.js

//= jquery
//= jquery_ujs
//= modals

application_controller.rb

# in your app controller, you'll want to set the layout to nil for XHR (ajax) requests

class ApplicationController < ActionController::Base
  layout Proc.new { |controller| controller.request.xhr? ? nil : 'application' }
end

index.html.erb

<%= link_to 'New Post', new_post_path, :remote => true %>

modals.js.coffee

# This file should be "required" into your `application.js` via the Asset Pipeline.
#

$ ->
  $modal = $('#modal')
  $modal_close = $modal.find('.close')
  $modal_container = $('#modal-container')

  # Handle modal links with the data-remote attribute
  $(document).on 'ajax:success', 'a[data-remote]', (xhr, data, status) ->
    $modal
      .html(data)
      .prepend($modal_close)
      .css('top', $(window).scrollTop() + 40)
      .show()
    $modal_container.show();

  $(document).on 'click', '#modal .close', ->
    $modal_container.hide()
    $modal.hide()
    false