fix: fixed the template

Alexandrshy · Jul 5, 2020 · 4805211 · 4805211
1 parent 0fc3dc1
commit 4805211
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 29 deletions.
diff --git a/example/index.html b/example/index.html
@@ -11,35 +11,35 @@
     <button class="modal__button" data-keukenhof-open="#modal">
       Open modal
     </button>
-    <div id="modal" class="modal">
-      <div class="modal__overlay">
-        <div class="modal__container" role="dialog">
-          <div class="modal__wrapper">
-            <button
-              class="modal__button modal__button--close"
-              data-keukenhof-close
+    <div id="modal" class="modal" role="dialog">
+      <div class="modal__overlay" data-keukenhof-close>
+      </div>
+      <div class="modal__container">
+        <div class="modal__wrapper">
+          <button
+            class="modal__button modal__button--close"
+            data-keukenhof-close
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              role="presentation"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                role="presentation"
-              >
-                <path
-                  d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"
-                />
-              </svg>
-            </button>
-            <main class="modal__main">
-              <h2 class="modal__title">Title</h2>
-              <p class="modal__desc">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure
-                exercitationem perspiciatis odit dolores soluta minima eveniet
-                quasi ex nostrum quibusdam deleniti facere molestias harum velit
-                consequuntur ipsam, id commodi dolor?
-              </p>
-              <a href="#" class="modal__link">More information</a>
-            </main>
-          </div>
+              <path
+                d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"
+              />
+            </svg>
+          </button>
+          <main class="modal__main">
+            <h2 class="modal__title">Title</h2>
+            <p class="modal__desc">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure
+              exercitationem perspiciatis odit dolores soluta minima eveniet
+              quasi ex nostrum quibusdam deleniti facere molestias harum velit
+              consequuntur ipsam, id commodi dolor?
+            </p>
+            <a href="#" class="modal__link">More information</a>
+          </main>
         </div>
       </div>
     </div>

diff --git a/example/style.css b/example/style.css
@@ -20,11 +20,20 @@ img {
 }
 
 .modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: none;
+  justify-content: center;
+  align-items: center;
+  min-width: 100vw;
+  min-height: 100vh;
 }
 
 .modal.isOpen {
-  display: block;
+  display: flex;
 }
 
 .modal.isOpening {