diff --git a/docs/js/modal.js b/docs/js/modal.js
index 769c4419..cc7a5e90 100644
--- a/docs/js/modal.js
+++ b/docs/js/modal.js
@@ -26,11 +26,9 @@ const isModalOpen = modal => {
 
 // Open modal
 const openModal = modal => {
-  setTimeout(() => {
-    visibleModal = modal;
-  }, 100);
   document.documentElement.classList.add(isOpenClass, openingClass);
   setTimeout(() => {
+    visibleModal = modal;
     document.documentElement.classList.remove(openingClass);
   }, 200);
   modal.setAttribute('open', true);
diff --git a/docs/js/modal.min.js b/docs/js/modal.min.js
index acf2d706..dc792360 100644
--- a/docs/js/modal.min.js
+++ b/docs/js/modal.min.js
@@ -1 +1 @@
-"use strict";var isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",visibleModal=null,toggleModal=function(e){e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=function(e){return!(!e.hasAttribute("open")||"false"==e.getAttribute("open"))},openModal=function(e){setTimeout(function(){visibleModal=e},100),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(function(){document.documentElement.classList.remove(openingClass)},200),e.setAttribute("open",!0)},closeModal=function(e){visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(function(){document.documentElement.classList.remove(closingClass,isOpenClass),e.removeAttribute("open")},200)};document.addEventListener("click",function(e){null!=visibleModal&&(visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal))}),document.addEventListener("keydown",function(e){"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)});
\ No newline at end of file
+"use strict";var isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",visibleModal=null,toggleModal=function(e){e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=function(e){return!(!e.hasAttribute("open")||"false"==e.getAttribute("open"))},openModal=function(e){document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(function(){visibleModal=e,document.documentElement.classList.remove(openingClass)},200),e.setAttribute("open",!0)},closeModal=function(e){visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(function(){document.documentElement.classList.remove(closingClass,isOpenClass),e.removeAttribute("open")},200)};document.addEventListener("click",function(e){null!=visibleModal&&(visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal))}),document.addEventListener("keydown",function(e){"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)});
\ No newline at end of file
diff --git a/docs/modal.html b/docs/modal.html
index 0f03a5e4..ecf39f76 100644
--- a/docs/modal.html
+++ b/docs/modal.html
@@ -62,4 +62,11 @@
       &lt;/<b>a</b>&gt;
     &lt;/<b>footer</b>&gt;
   &lt;/<b>article</b>&gt;
-&lt;/<b>dialog</b>&gt;</code></pre></footer></article><p>As Pico focuses on CSS styles, we have not integrated any JavaScript in the library.</p></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><dialog id="modal-example"><article><a href="#close" aria-label="Close" class="close" data-target="modal-example" onclick="toggleModal(event)"></a><h3>Confirm your action!</h3><p>Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.</p><footer><a href="#cancel" role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</a><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)">Confirm</a></footer></article></dialog><script src="js/commons.min.js"></script><script src="js/modal.min.js"></script></body></html>
\ No newline at end of file
+&lt;/<b>dialog</b>&gt;</code></pre></footer></article><p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p><p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/dev/docs/js/modal.js">js/modal.js</a>.</p><p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code>&lt;<b>dialog</b>&gt;</code> container.</p><pre><code><em>&lt;!-- Open modal--&gt;</em>
+&lt;<b>dialog</b> <i>open</i>&gt;
+&lt;/<b>dialog</b>&gt;
+
+<em>&lt;!-- Modal closed --&gt;</em>
+&lt;<b>dialog</b>&gt;
+&lt;/<b>dialog</b>&gt;
+</code></pre><h2>Utilities</h2><p>Modals come with 3 utility classes.</p><p><code>&lt;<b>html</b> <i>class</i>=<u>"modal-is-open"</u>&gt;</code> blurs the background and blocks any scrolling and interactions below the modal.</p><p><code>&lt;<b>html</b> <i>class</i>=<u>"modal-is-opening"</u>&gt;</code> brings an opening animation.</p><p><code>&lt;<b>html</b> <i>class</i>=<u>"modal-is-closing"</u>&gt;</code> brings a closing animation.</p></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><dialog id="modal-example"><article><a href="#close" aria-label="Close" class="close" data-target="modal-example" onclick="toggleModal(event)"></a><h3>Confirm your action!</h3><p>Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.</p><footer><a href="#cancel" role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</a><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)">Confirm</a></footer></article></dialog><script src="js/commons.min.js"></script><script src="js/modal.min.js"></script></body></html>
\ No newline at end of file
diff --git a/docs/src/modal.html b/docs/src/modal.html
index c6afd51b..f56c1e67 100644
--- a/docs/src/modal.html
+++ b/docs/src/modal.html
@@ -138,7 +138,30 @@
             </footer>
           </article>
 
-          <p>As Pico focuses on CSS styles, we have not integrated any JavaScript in the library.</p>
+          <p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p>
+
+          <p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/dev/docs/js/modal.js">js/modal.js</a>.</p>
+
+          <p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code>&lt;<b>dialog</b></u>&gt;</code> container.</p>
+
+<pre><code><em>&lt;!-- Open modal--&gt;</em>
+&lt;<b>dialog</b> <i>open</i>&gt;
+&lt;/<b>dialog</b>&gt;
+
+<em>&lt;!-- Modal closed --&gt;</em>
+&lt;<b>dialog</b>&gt;
+&lt;/<b>dialog</b>&gt;
+</code></pre>
+
+          <h2>Utilities</h2>
+
+          <p>Modals come with 3 utility classes.</p>
+
+          <p><code>&lt;<b>html</b> <i>class</i>=<u>"modal-is-open"</u>&gt;</code> blurs the background and blocks any scrolling and interactions below the modal.</p>
+
+          <p><code>&lt;<b>html</b> <i>class</i>=<u>"modal-is-opening"</u>&gt;</code> brings an opening animation.</p>
+
+          <p><code>&lt;<b>html</b> <i>class</i>=<u>"modal-is-closing"</u>&gt;</code> brings a closing animation.</p>
 
         </section>