description="A flexible container with graceful spacings across devices and viewports."
canonical="modal.html"
}
</head>
<body>
${require('./_nav.html')}
<mainclass="container"id="docs">
${require('./_sidebar.html') active="modal-link"}
<divrole="document">
<sectionid="modal">
<hgroup>
<h1>Modal</h1>
<h2>The classic modal element with graceful spacings across devices and viewports.</h2>
</hgroup>
<p>Modals are built with <code><<b>dialog</b>></code> as a wrapper and <code><<b>article</b>></code> as a content container.</p>
<p>Inside <code><<b>header</b>></code>, <code><<b>a</b><i>class</i>=<u>"close"</u>></code> is defined to <code><i>float</i>: <u>right</u>;</code> allowing a close icon to be top aligned with a title.</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: <ahref="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><<b>dialog</b></u>></code> container.</p>
<pre><code><em><!-- Open modal--></em>
<<b>dialog</b><i>open</i>>
</<b>dialog</b>>
<em><!-- Modal closed --></em>
<<b>dialog</b>>
</<b>dialog</b>>
</code></pre>
<h2>Utilities</h2>
<p>Modals come with 3 utility classes.</p>
<p><code><<b>html</b><i>class</i>=<u>"modal-is-open"</u>></code> blurs the background and blocks any scrolling and interactions below the modal.</p>
<p><code><<b>html</b><i>class</i>=<u>"modal-is-opening"</u>></code> brings an opening animation.</p>
<p><code><<b>html</b><i>class</i>=<u>"modal-is-closing"</u>></code> brings a closing animation.</p>
