README.md

This is a Rails 5 adaptation of an answer to a StackOverflow question regarding using jQuery UJS 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">
  <div class="content"></div>
</div>

_modal.scss

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

#modal {
  width: 100%;
  padding: 0 20px;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  display: none;
  @include transition(opacity 0.3s);

  &:before {
    display: block;
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 50;
  }

  .content {
    background: #fff;
    box-shadow: 0 2px 25px rgba(#111, 0.3);
    padding: 30px;
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    z-index: 51;
    border-radius: 3px;
  }
}

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 -> do
    request.xhr? ? false : 'application'
  end
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')
  $content = $modal.find('.content')
  $window = $(window)

  $(document).on 'click', (e) ->
    if $(e.target).is $modal
      $modal.hide()

  $(document).on 'ajax:success', 'a[data-remote]', (xhr, data, status) ->
    $content.html(data)
    $modal.css opacity: 0, display: 'block'

    docW = $window.width()
    docH = $window.height()
    mW = $modal.outerWidth()
    mH = $modal.outerHeight()

    x = (docW - mW) / 2
    y = ((docH - mH) / 2) + $window.scrollTop()

    $modal.css left: x, top: y, opacity: 1

Aha. The answer is that Rails' rails.js doesn't trigger ajax:success if the response to the ajax request isn't text/json. This meant I had to adjust my controller to respond properly, from

format.js

to

format.js { render :json => { :html => render_to_string('templatename')}, :content_type => 'text/json' }

...and then alter modals.js.coffee to use .html(data.html) instead of just .html(data).

Corey - this was super helpful. Have you thought about adding a function to close the modal if the user clicks outside it?

In Rails 4 this line:

layout Proc.new { |controller| controller.request.xhr? ? nil : 'application' }

should be

layout Proc.new { |controller| controller.request.xhr? ? false : 'application' }

I've updated this Gist to work with Rails 5.

Hi, and thanks for the tutorial, it helped me a lot!

I'm having a problem on the very last step of the ajax stuff. In this line

https://gist.github.com/coreyward/1456815#file-modals-js-coffee-L13

data and status are undefined. Do I need to do something special in my method? I have

def new
  @model = Model.new
end