Updated README, renamed some files.

README.md

@@ -1,8 +1,83 @@
-View docs & demo [here.](http:https://dl.dropbox.com/u/780754/jquery-modal/example.html)
+# Installation
 
-ToDo
-====
+Include [jQuery](http:https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js) and `jquery.modal.min.js` scripts:
 
-* Doesn't actually work in IE just yet. Would be a nice touch to get that working.
-* Should be able to bind events to specific modals: `$('#window').modal().bind('modal:open' function() { ... });`
-* 
+ <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script src="jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>
+
+Include the `jquery.modal.css` stylesheet:
+
+ <link rel="stylesheet" href="jquery.modal.css" type="text/css" media="screen" />
+
+
+# Opening modals
+
+## Method 1: Manually
+
+Basic usage is to embed your modal's HTML (with the 'modal' class) directly into the document.
+
+ <form id="login-form" class="modal">
+  ...
+ </form>
+
+and then invoke `modal()` on the element.
+
+ $('#login-form').modal();
+
+
+## Method 2: Automatically attaching to links
+
+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.
+
+ <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).modal();
+ });
+
+# Closing modals
+
+Because there can be only one modal active at a single time, there's no need to select which modal to close:
+
+ $.fn.modal.close();
+
+_TODO: this should be changed so that when called on a specific element, the element is returned (normal jQuery fashion)._
+
+Similar to how links can be automatically bound to open modals, they can be bound to close modals using `rel="modal:close"`:
+
+ <a href="#login-form" rel="modal:open">Login</a>
+
+# 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.
+
+However, when this occurs, you will probably want to at least re-center the modal in the viewport:
+
+ $.fn.modal.resize()
+
+# Events
+
+The following events are triggered on the modal element at various points in the open/close cycle. Hopefully the names are self-explanatory.
+
+ $.fn.modal.BEFORE_BLOCK = 'modal:before-block';
+ $.fn.modal.BLOCK = 'modal:block';
+ $.fn.modal.BEFORE_OPEN = 'modal:before-open';
+ $.fn.modal.OPEN = 'modal:open';
+ $.fn.modal.BEFORE_CLOSE = 'modal:before-close';
+ $.fn.modal.CLOSE = 'modal:close';
+
+The first and only argument passed to these event handlers is the `modal` object, which has three properties:
+
+ modal.elm; // Original jQuery object upon which modal() was invoked.
+ modal.options; // Options passed to the modal.
+ modal.blocker; // The overlay element.
+
+So, you could do something like this:
+
+ $('#purchase-form').bind('modal:before-close', function(modal) {
+  clear_shopping_cart();
+ });

example.html

@@ -4,7 +4,7 @@
  <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.js" type="text/javascript" charset="utf-8"></script>
- <link rel="stylesheet" href="modal.css" type="text/css" media="screen" />
+ <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>
  <script type="text/javascript" charset="utf-8"> hljs.initHighlightingOnLoad(); </script>

jquery.modal.js

@@ -70,13 +70,18 @@
  $.fn.modal.CLOSE = 'modal:close';
 
  $.fn.modal.close = function(event) {
- if(event) event.preventDefault();
- if(!current_modal) return;
+ if(event) {
+ event.preventDefault();
+ }
+ if(!current_modal) {
+ return;
+ }
 
- $(document).trigger($.fn.modal.BEFORE_CLOSE, [current_modal]);
+ current_modal.elm.trigger($.fn.modal.BEFORE_CLOSE, [current_modal]);
  current_modal.blocker.remove();
  current_modal.elm.hide();
- $(document).trigger($.fn.modal.CLOSE, [null]);
+ current_modal.elm.trigger($.fn.modal.CLOSE, [current_modal]);
+ current_modal = null;
  };
 
  $.fn.modal.resize = function() {