Adjusting the docs to show the modals demo for mobile devices.

docs/css/docs.css

@@ -649,10 +649,21 @@ h6 {
 }
 
 /* Modal example */
-.iphone .iphone-content .modal { position: absolute; }
-.iphone .iphone-content .modal .content { margin-top: 44px; }
-#myModal.active { background: #cecece; }
-#modalsInPhone #iwindow > .button { margin: 10px; }
+.component-example .modal {
+  left: 0;
+  z-index: 10001;
+}
+.iphone .iphone-content .modal { 
+  position: absolute; 
+}
+.component-example .modal .content,
+.iphone .iphone-content .modal .content { 
+  margin-top: 44px; 
+}
+#modalsInPhone #iwindow > .button { 
+  margin: 10px; 
+}
+
 
 /* Slider examples */
 .component-example-fullbleed .slider,

docs/index.html

@@ -983,9 +983,22 @@ document
           <h3 class="component-title">Modals</h3>
 
           <div class="component-example">
-            
+            <a href="#myModalexample" class="button">Open modal</a>
+            <div id="myModalexample" class="modal">
+              <header class="bar-title">
+                <h1 class="title">Modal</h1>
+                <a class="button" href="#myModalexample">
+                  Close
+                </a>
+              </header>
+              
+              <div class="content content-padded">
+                <p>The contents of my modal</p>
+              </div>
+            </div>
           </div>
 
+
 <pre class="prettyprint">
 &lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt;
 
@@ -998,7 +1011,7 @@ document
   &lt;/header&gt;
   
   &lt;div class=&quot;content content-padded&quot;&gt;
-    &lt;p&gt;The contents of my modal&lt;/p&gt;
+    &lt;p&gt;The contents of my modal.&lt;/p&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>