Documented modals

First run - we could probably extend this
* Used some custom CSS to make the position: fixed demo absolute.

docs/index.html

@@ -58,6 +58,7 @@
               <li><a href="#forms">Forms</a></li>
               <li><a href="#toggles">Toggles</a></li>
               <li><a href="#popovers">Popovers</a></li>
+              <li><a href="#modals">Modals</a></li>
               <li><a href="#sliders">Sliders</a></li>
               <li><a href="#push">Push</a></li>
             </ul>
@@ -976,6 +977,40 @@ document
 </pre>
 
         </article>
+        
+        <!-- Modals -->
+        <article class="component" id="modals">
+          <style>
+            /* Only for the demo page */
+            .iphone .iphone-content .modal { position: absolute;  }
+            .iphone .iphone-content .active { background: #cecece; }
+          </style>
+          <h3 class="component-title">Modals</h3>
+
+          <div class="component-example">
+            
+          </div>
+
+<pre class="prettyprint">
+&lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt;
+
+&lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
+  &lt;header class=&quot;bar-title&quot;&gt;
+    &lt;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
+    &lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
+      Close
+    &lt;/a&gt;
+  &lt;/header&gt;
+  
+  &lt;div class=&quot;content content-padded&quot;&gt;
+    &lt;p&gt;The contents of my modal&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+          <p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p>
+
+        </article>
 
         <!-- Slider -->
         <article class="component" id="sliders">