From a47db2cad458aa4bedc60b34952ff328ce56777f Mon Sep 17 00:00:00 2001
From: Kyle Fox <kyle.fox@gmail.com>
Date: Mon, 4 Oct 2010 15:49:52 -0600
Subject: [PATCH] some stuffs.

---
 README.md       |  9 ++++++++-
 example.html    | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 jquery.modal.js |  2 +-
 3 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8b884de..9aac9d6 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,8 @@
-View docs & demo [here.](http://dl.dropbox.com/u/780754/jquery-modal/example.html)
\ No newline at end of file
+View docs & demo [here.](http://dl.dropbox.com/u/780754/jquery-modal/example.html)
+
+ToDo
+====
+
+* 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() { ... });`
+* 
\ No newline at end of file
diff --git a/example.html b/example.html
index 45f92f9..8c16cda 100644
--- a/example.html
+++ b/example.html
@@ -18,6 +18,38 @@
     p code, li code {background:#ffffcc; color: #444;}
     pre { font-size: 12px; line-height: 18px; }
     hr { height: 10px; background: #eee; border: none; }
+    
+    
+    /* Example 2 (login form) */
+    .login_form.modal {
+      border-radius: 0;
+      line-height: 18px;
+      padding: 0;
+      font-family: "Lucida Grande", Verdana, sans-serif;
+    }
+    
+    .login_form h3 {
+      margin: 0;
+      padding: 10px;
+      color: #fff;
+      font-size: 14px;
+      background: -moz-linear-gradient(top, #2e5764, #1e3d47);
+      background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1e3d47),color-stop(1, #2e5764));
+    }
+    
+    .login_form.modal p { padding: 20px 30px; border-bottom: 1px solid #ddd; margin: 0;
+      background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #eee),color-stop(1, #fff));  
+      overflow: hidden;
+    }
+    .login_form.modal p:last-child { border: none; }
+    .login_form.modal p label { float: left; font-weight: bold; color: #333; font-size: 13px; width: 110px; line-height: 22px; }
+    .login_form.modal p input[type="text"],
+    .login_form.modal p input[type="password"] {
+      font: normal 12px/18px "Lucida Grande", Verdana;
+      padding: 3px;
+      border: 1px solid #ddd;
+      width: 200px;
+    }
   </style>
   <title>jQuery Modal</title>
 </head> 
@@ -28,6 +60,7 @@ <h1>jQuery Modal</h1>
 <ul>
   <li>Automatic binding using HTML semantics</li>
   <li>No images &amp; light-weight <small>(about 1k minified)</small></li>
+  <li>Simple markup makes it easy to style</li>
   <li>Attach custom behaviour using <a href="http://api.jquery.com/category/events/">jQuery events</a></li>
   <li>Close with click or ESC key</li>
   <li>Works in every single browser known to man (including Lynx)</li>
@@ -74,6 +107,21 @@ <h3>Demo: <a href="#ex1" rel="open-modal">Open Modal</a></h3>
 </div>
   
   
+<hr />
+
+<h2>Example 2: styled login form &amp; events</h2>
+
+<!-- Link to open the modal -->
+<h3>Demo: <a href="#ex2" rel="open-modal">Login!</a></h3>
+
+<!-- Modal HTML embedded directly into document -->
+<form action="" class="login_form modal" id="ex2" style="display:none;">
+  <h3>Please login to continue</h3>
+  <p><label>Username:</label><input type="text" /></p>
+  <p><label>Password:</label><input type="password" /></p>
+  <p><input type="submit" value="Login" /></p>
+</form>
+  
   
 <script type="text/javascript" charset="utf-8">
   $(function() {
diff --git a/jquery.modal.js b/jquery.modal.js
index f21d646..a975146 100644
--- a/jquery.modal.js
+++ b/jquery.modal.js
@@ -6,7 +6,7 @@
     
     var $elm = $(this);
     
-    // If this is a link, bind to the click event.
+    // If this is a link, bind to its click event.
     if($elm.attr('href')) {
       $elm.click(open_modal_from_link);
       return;