Fix example modal

foundation · Jul 31, 2014 · b95676d · b95676d
1 parent c70650e
commit b95676d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/doc/assets/scss/docs.scss b/doc/assets/scss/docs.scss
@@ -1042,6 +1042,13 @@ what you get
     margin-top: 20px;
   }
 }
-.reveal-modal {
-  z-index: 1002;
+.gs-modal {
+  .reveal-modal {
+    z-index: 1002;
+  }
+  .reveal-modal-bg {
+    z-index: 1000;
+  }
 }
+
+
diff --git a/doc/includes/getting_started/gs_plugins_example.html b/doc/includes/getting_started/gs_plugins_example.html
@@ -1,16 +1,18 @@
-<a href="#" data-reveal-id="firstModal" class="radius button">Click me to Reveal a Modal</a>
-<div id="firstModal" class="reveal-modal" data-reveal>
-  <h2>This is a modal.</h2>
-  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
-  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
-  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
-  <a class="close-reveal-modal">&#215;</a>
-</div>
-<div id="secondModal" class="reveal-modal" data-reveal>
-  <h2>This is a second modal.</h2>
-  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
-  <a class="close-reveal-modal">&#215;</a>
-</div>
+<section class="gs-modal">
+  <a href="#" data-reveal-id="firstModal" class="radius button">Click me to Reveal a Modal</a>
+  <div id="firstModal" class="reveal-modal" data-reveal>
+    <h2>This is a modal.</h2>
+    <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
+    <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
+    <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
+    <a class="close-reveal-modal">&#215;</a>
+  </div>
+  <div id="secondModal" class="reveal-modal" data-reveal>
+    <h2>This is a second modal.</h2>
+    <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
+    <a class="close-reveal-modal">&#215;</a>
+  </div>
+</section>
 <form data-abide>
   <div class="name-field">
     <label>Today's date&nbsp; <small>required</small>