diff --git a/docs/modal.html b/docs/modal.html index 73e958f8..38dfbbaa 100644 --- a/docs/modal.html +++ b/docs/modal.html @@ -1 +1,87 @@ -Modal • Pico.css

Confirm your action!

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.

 \ No newline at end of file +Modal • Pico.css

Confirm your action!

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.

 \ No newline at end of file diff --git a/docs/src/modal.html b/docs/src/modal.html index 8f8522e1..4759285a 100644 --- a/docs/src/modal.html +++ b/docs/src/modal.html @@ -20,11 +20,170 @@

Modal

The classic modal element with graceful spacings across devices and viewports.

- + +

Modals are built with <dialog> as a wrapper and <article> as a content container.

+

Inside <header>, <a class="close"> is defined to float: right; allowing a close icon to be top aligned with a title.

+ + +
+
+ +

Modal title

+
+

+ Nunc nec ligula a tortor sollicitudin dictum in vel enim. + Quisque facilisis turpis vel eros dictum aliquam et nec turpis. + Sed eleifend a dui nec ullamcorper. + Praesent vehicula lacus ac justo accumsan ullamcorper. +

+
+ + +
<dialog open>
+  <article>
+    <header>
+      <a href="#close" aria-label="Close" class="close"></a>
+      Modal title
+    </header>
+    <p>
+      Nunc nec ligula a tortor sollicitudin dictum in vel enim. 
+      Quisque facilisis turpis vel eros dictum aliquam et nec turpis. 
+      Sed eleifend a dui nec ullamcorper. 
+      Praesent vehicula lacus ac justo accumsan ullamcorper.
+    </p>
+  </article>
+</dialog>
+ +

Inside <footer>, the content is right aligned by default.

+ + +
+

Confirm your action!

+

+ Mauris non nibh vel nisi sollicitudin malesuada. + Donec ut sagittis erat. Praesent eu eros felis. + Ut consectetur placerat pulvinar. +

+ +
+ + + +
<dialog open>
+  <article>
+    <h3>Confirm your action!</h3>
+    <p>
+      Mauris non nibh vel nisi sollicitudin malesuada. 
+      Donec ut sagittis erat. Praesent eu eros felis. 
+      Ut consectetur placerat pulvinar.
+    </p>
+    <footer>
+      <a href="#cancel" role="button" class="secondary">Cancel</a>
+      <a href="#confirm" role="button">Confirm</a>
+    </footer>
+  </article>
+</dialog>
+ +
+

Live demo

+

Toggle a modal by clicking the button below.

+
+
+
+

Pico does not include JavaScript code. You will need to implement your JS to interact with modals.

+ +

As a starting point, you can look at the JavaScript used in this documentation: js/modal.js.

+ +

To make a modal appear, add the open attribute to the <dialog> container.

+ +
<!-- Open modal-->
+<dialog open>
+  <article>
+  …
+  </article>
+</dialog>
+
+<!-- Modal closed -->
+<dialog>
+  <article>
+    …
+  </article>
+</dialog>
+
+ +

Utilities

+ +

Modals come with 3 utility classes.

+ +

.modal-is-open prevents any scrolling and interactions below the modal.

+ +
<!doctype html>
+<html class="modal-is-open">
+  …
+</html>
+ +

.modal-is-opening brings an opening animation.

+ +
<!doctype html>
+<html class="modal-is-open modal-is-opening">
+  …
+</html>
+ +

.modal-is-closing brings a closing animation.

+ +
<!doctype html>
+<html class="modal-is-open modal-is-closing">
+  …
+</html>
+ ${require('./_footer.html')} @@ -48,4 +207,4 @@ - + \ No newline at end of file