Added detection for AJAX links, updated README.

README.md

@@ -1,3 +1,16 @@
+A simple & lightweight method of displaying modal windows with jQuery.
+
+# Why another modal plugin?
+
+Most plugins I've found try to do too much, and have specialized ways of handling photo galleries, iframes and video. The resulting HTML & CSS is often bloated and difficult to customize.
+
+By contrast, this plugin handles the two most common scenarios I run into
+
+* displaying an existing DOM element
+* loading a page with AJAX
+
+and does so with as little HTML & CSS as possible -- and **no images.**
+
 # Installation
 
 Include [jQuery](http:https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js) and `jquery.modal.min.js` scripts:
@@ -10,9 +23,9 @@ Include the `jquery.modal.css` stylesheet:
  <link rel="stylesheet" href="jquery.modal.css" type="text/css" media="screen" />
 
 
-# Opening modals
+# Opening
 
-## Method 1: Manually
+**Method 1: Manually**
 
 Basic usage is to embed your modal's HTML (with the 'modal' class) directly into the document.
 
@@ -25,32 +38,25 @@ and then invoke `modal()` on the element.
  $('#login-form').modal();
 
 
-## Method 2: Automatically attaching to links
+**Method 2: Automatically attaching to links**
+
+An even simpler way is to add `rel="modal:open"` to links. When the link is clicked, the link's `href` is loaded into a modal.
 
-An even simpler way is to add `rel="modal:open"` to links. When the link is clicked, the DOM element with an ID corresponding to the link's `href` attribute will be opened in a modal.
+Open an existing DOM element:
 
  <a href="#login-form" rel="modal:open">Login</a>
 
-## AJAX
-
-I know somebody is going to ask, so here's an example of how you could load content with AJAX:
-
- $.get('/login-form', {}, function(html) {
-  $(html)
-  
-  // Append the resulting HTML to the document:
-  .appendTo('body')
-  
-  // Completely remove the modal's DOM element when it's closed:
-  .bind('modal:close', function(event, modal) { modal.elm.remove() })
-  
-  // Open them modal:
-  .modal();
- });
-
-Since you'll probably want to remove the modal from the DOM when it's closed:
+Load a remote URL with AJAX:
+
+ <a href="login.html" rel="modal:open">Login</a>
 
-# Closing modals
+You should apply a width to all your modal elements using normal CSS.
+
+ #login-form.modal { width: 400px; }
+
+The modal doesn't have a fixed height, and thus will expand & contract vertically to fit the content.
+
+# Closing
 
 Because there can be only one modal active at a single time, there's no need to select which modal to close:
 
@@ -62,6 +68,8 @@ Similar to how links can be automatically bound to open modals, they can be boun
 
  <a href="#login-form" rel="modal:open">Login</a>
 
+_(Note that modals loaded with AJAX are removed from the DOM when closed)._
+
 # Resizing
 
 There's really no need to modals, since the default styles don't specify a fixed height; modals will expand vertically (like a normal HTML element) to fit their contents.
@@ -93,4 +101,13 @@ So, you could do something like this:
   clear_shopping_cart();
  });
 
-If you wish to remove the modal element from the DOM when it's closed, you must do so manually by binding to `modal:close` (see AJAX section).
+
+# Contributing
+
+I would love help improving this plugin, particularly with:
+
+* Performance improvements
+* Making the code as concise/efficient as possible
+* Bug fixes & browser compatibility
+
+Please fork and send pull requests, or create an [issue](https://github.com/kylefox/jquery-modal/issues).

examples/ajax.html

@@ -0,0 +1,2 @@
+<h1>Hello there!</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

examples/index.html

@@ -3,7 +3,7 @@
 <head> 
  <script src="http:https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 
- <script src="../jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>
+ <script src="../jquery.modal.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="../jquery.modal.css" type="text/css" media="screen" />
 
  <script src="highlight/highlight.pack.js" type="text/javascript" charset="utf-8"></script>
@@ -136,6 +136,11 @@ <h2>Example 3: resizing</h2>
  <p><a id="more" href="#more">More!</a></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
+
+<hr />
+
+<h2>Example 4: AJAX</h2>
+<p>This <a href="ajax.html" rel="modal:open">example</a> loads HTML with AJAX.</p>
 
 
 <script type="text/javascript" charset="utf-8">

jquery.modal.js

@@ -90,7 +90,17 @@
 
  function open_modal_from_link(event) {
  event.preventDefault();
- $($(this).attr('href')).modal();
+ var target = $(this).attr('href');
+ if(target.match(/^#/)) { // DOM id
+ $(target).modal();
+ } else { // AJAX
+ $.get(target, {}, function(html) {
+ $(html)
+ .appendTo('body')
+ .bind('modal:close', function(event, modal) { modal.elm.remove(); })
+ .modal();
+ });
+ }
  }
 
  function center_modal(modal) {