Added an image ... *sigh*. Bumped version to 0.2.1 (will start doing …

…patch version increments for minor fixes).

README.md

@@ -9,7 +9,7 @@ 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.**
+and does so with as little HTML & CSS as possible.
 
 # Installation
 
@@ -78,6 +78,20 @@ However, when this occurs, you will probably want to at least re-center the moda
 
     $.fn.modal.resize()
 
+# Options
+
+These are the supported options and their default values:
+
+    $.fn.modal.defaults = {
+      overlay: "#000",        // Overlay color
+      opacity: 0.75,          // Overlay opacity
+      zIndex: 1,              // Overlay z-index.
+      escapeClose: true,      // Allows the user to close the modal by pressing `ESC`
+      clickClose: true,       // Allows the user to close the modal by clicking the overlay
+      showClose: true         // Shows a (X) icon/link in the top-right corner
+      modalClass: "modal",    // CSS class added to the element being displayed in the modal.
+    };
+
 # Events
 
 The following events are triggered on the modal element at various points in the open/close cycle.  Hopefully the names are self-explanatory.

examples/index.html

@@ -10,7 +10,8 @@
   <script type="text/javascript" charset="utf-8"> hljs.initHighlightingOnLoad(); </script>
   <link rel="stylesheet" href="highlight/github.css" type="text/css" media="screen" />
   <style type="text/css" media="screen">
-    body { font: normal 14px/21px "Helvetica Neue", Arial, sans-serif; color: #777; padding: 30px 60px; }
+    html { background: #ddd; }
+    body { font: normal 14px/21px "Helvetica Neue", Arial, sans-serif; color: #777; padding: 30px 60px; width: 740px; margin: 0 auto; background: #fff; }
     small { color: #aaa; }
     h1,h2,h3,h4 { color: #444; }
     a { color: #0086B3; font-weight: bold; }
@@ -78,7 +79,7 @@ <h1>jQuery Modal</h1>
 
 <hr />
 
-<h3>Example 1 (simplest): Open &amp; Close with links</h3>
+<h2>Example 1 (simplest): Open &amp; Close with links</h2>
 <ol>
   <li>Embed modal HTML in document <small>(and hide it)</small></li>
   <li>Create a link with <code>rel="modal:open"</code> and set the <code>href</code> attribute to the modal's DOM id.</li> 
@@ -142,6 +143,23 @@ <h2>Example 3: resizing</h2>
 <h2>Example 4: AJAX</h2>
 <p>This <a href="ajax.html" rel="modal:open">example</a> loads HTML with AJAX.</p>
 
+<hr />
+
+<h2>Example 5: the un-closable window</h2>
+<p>
+  This <a href="#ex5">example</a> demonstrates how to disable the default methods of closing the modal:
+
+<pre><code> $("#sticky").modal({
+  escapeClose: false,
+  clickClose: false,
+  showClose: false
+});</code></pre>
+
+
+</p>
+<div id="ex5" class="modal">
+  <p>If you do this, be sure to provide the user with an alternate method of <a href="#" rel="modal:close">closing the window.</a></p>
+</div>
 
 <script type="text/javascript" charset="utf-8">
   $(function() {
@@ -163,6 +181,15 @@ <h2>Example 4: AJAX</h2>
       return false;
     });
 
+    $('a[href="#ex5"]').click(function() {
+      $($(this).attr('href')).modal({
+        escapeClose: false,
+        clickClose: false,
+        showClose: false
+      });
+      return false;
+    });
+
   });
 </script>
 </body> 

jquery.modal.css

@@ -9,4 +9,15 @@
   -webkit-box-shadow: 0 0 10px #000;
   -moz-box-shadow: 0 0 10px #000;
   box-shadow: 0 0 10px #000;
+}
+
+.modal a.close-modal {
+  position: absolute;
+  top: -12.5px;
+  right: -12.5px;
+  display: block;
+  width: 30px;
+  height: 30px;
+  text-indent: -9999px;
+  background: url(close.png) no-repeat 0 0;
 }

jquery.modal.js

@@ -1,6 +1,6 @@
 /*
     A simple jQuery modal (http://github.com/kylefox/jquery-modal)
-    Version 0.2
+    Version 0.2.1
 */
 (function() {
 
@@ -41,6 +41,9 @@
 
     function show() {
       center_modal(current_modal);
+      if(options.showClose) {
+        current_modal.elm.append('<a href="#close-modal" rel="modal:close" class="close-modal">Close</a>');
+      }
       $elm.addClass(options.modalClass).addClass('current').show();
       $elm.trigger($.fn.modal.OPEN, [current_modal]);
     }
@@ -58,7 +61,8 @@
     zIndex: 1,
     escapeClose: true,
     clickClose: true,
-    modalClass: "modal"
+    modalClass: "modal",
+    showClose: true
   };
 
   // Event constants: