vue-picocss

<!doctype html> <html lang="en"> <head> ${require('./_head.html') title="Modal" description="A flexible container with graceful spacings across devices and viewports." canonical="modal.html" } </head> <body> ${require('./_nav.html')} <main class="container" id="docs"> ${require('./_sidebar.html') active="modal-link"} <div role="document"> <section id="modal"> <hgroup> <h1>Modal</h1> <h2>The classic modal element with graceful spacings across devices and viewports.</h2> </hgroup> Modals are built with <code><dialog></code> as a wrapper and <code><article></code> as a content container. Inside <code><header></code>, <code><a class="close"></code> is defined to <code>float: right;</code> allowing a close icon to be top aligned with a title. <dialog class="example" open> <article> <header> <a href="#close" aria-label="Close" class="close" onclick="event.preventDefault()"></a> Modal title </header> 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. </article> </dialog> <pre><code><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></code></pre> Inside <code><footer></code>, the content is right aligned by default. <dialog class="example" open> <article> <h3>Confirm your action!</h3> Mauris non nibh vel nisi sollicitudin malesuada. Donec ut sagittis erat. Praesent eu eros felis. Ut consectetur placerat pulvinar. <footer> <a href="#cancel" role="button" class="secondary" onclick="event.preventDefault()">Cancel</a><a href="#confirm" role="button" onclick="event.preventDefault()">Confirm</a> </footer> </article> </dialog> <pre><code><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></code></pre> <hgroup> <h2>Live demo</h2> <h3>Toggle a modal by clicking the button below.</h3> </hgroup> <article> <button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button> <footer class="code"> <pre><code> <button class="contrast" data-target="modal-example" onClick="toggleModal(event)"> Launch demo modal </button>  <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></code></pre> </footer> </article> 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 this example: <a href="https://github.com/picocss/examples/blob/master/v1-preview/js/modal.js">modal.js</a>. To make a modal appear, add the <code>open</code> attribute to the <code><dialog></code> container. <pre><code> <dialog open> <article> … </article> </dialog>  <dialog> <article> … </article> </dialog> </code></pre> <h2>Utilities</h2> Modals come with 3 utility classes. ℹ️ These classes are not available in the <a href="classless.html">class-less version</a>. <code>.modal-is-open</code> prevents any scrolling and interactions below the modal. <pre><code><!doctype html> <html class="modal-is-open"> … </html></code></pre> <code>.modal-is-opening</code> brings an opening animation. <pre><code><!doctype html> <html class="modal-is-open modal-is-opening"> … </html></code></pre> <code>.modal-is-closing</code> brings a closing animation. <pre><code><!doctype html> <html class="modal-is-open modal-is-closing"> … </html></code></pre> </section> ${require('./_footer.html')} </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> Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod. <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> </script> </body> </html>