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 (https://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: