Fix example modal

diff --git a/doc/assets/scss/docs.scss b/doc/assets/scss/docs.scss
index 6f7b7af4db1698a38e965774279b132bf45b7fc9..49985c46d1c77b0d43714705c1a1f770a0cdbf95 100755 (executable)
--- 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
index 842ee15029b1a6c5c35af8c2f333dd1f090da354..9f60e5f84b170090b39f653dfaff1854010dffa7 100644 (file)
--- 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>