wojtha · December 5, 2012 18:39 · Nov 9, 2012 · Dec 10, 2011 · Dec 10, 2011
diff --git a/modals.js.coffee b/modals.js.coffee
@@ -7,15 +7,15 @@ $ ->
   $modal_container = $('#modal-container')
 
   # Handle modal links with the data-remote attribute
-  $.on 'ajax:success', 'a[data-remote]', (xhr, data, status) ->
+  $(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();
 
-  $.on 'click', '#modal .close', ->
+  $(document).on 'click', '#modal .close', ->
     $modal_container.hide()
     $modal.hide()
     false
diff --git a/_modal.html.erb b/_modal.html.erb
@@ -1,5 +1,3 @@
-# in a view, perhaps a _modal.html.erb partial that is included into 
-# your layout (probably at the bottom).
 <div id="modal-container"></div>
 <div id="modal">
   <a href="#" class="close">close</a>

diff --git a/application_controller.rb b/application_controller.rb
@@ -1,4 +1,5 @@
 # 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
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+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
diff --git a/_modal.html.erb b/_modal.html.erb
@@ -0,0 +1,6 @@
+# in a view, perhaps a _modal.html.erb partial that is included into 
+# your layout (probably at the bottom).
+<div id="modal-container"></div>
+<div id="modal">
+  <a href="#" class="close">close</a>
+</div>
diff --git a/_modal.scss b/_modal.scss
@@ -0,0 +1,33 @@
+// 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;
+    }
+  }
+}
diff --git a/application.js b/application.js
@@ -0,0 +1,3 @@
+//= jquery
+//= jquery_ujs
+//= modals
diff --git a/application_controller.rb b/application_controller.rb
@@ -0,0 +1,4 @@
+# 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
diff --git a/index.html.erb b/index.html.erb
@@ -0,0 +1 @@
+<%= link_to 'New Post', new_post_path, :remote => true %>
diff --git a/modals.js.coffee b/modals.js.coffee
@@ -0,0 +1,21 @@
+# 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
+  $.on 'ajax:success', 'a[data-remote]', (xhr, data, status) ->
+    $modal
+      .html(data)
+      .prepend($modal_close)
+      .css('top', $(window).scrollTop() + 40)
+      .show()
+    $modal_container.show();
+
+  $.on 'click', '#modal .close', ->
+    $modal_container.hide()
+    $modal.hide()
+    false
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		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
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<%= link_to 'New Post', new_post_path, :remote => true %>