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.
</<b>p</b>>
</<b>article</b>>
</<b>dialog</b>></code></pre><p>Inside <code><<b>footer</b>></code>, the content is right aligned by default.</p><dialogclass="example"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><ahref="#cancel"role="button"class="secondary"onclick="event.preventDefault()">Cancel</a><ahref="#confirm"role="button"onclick="event.preventDefault()">Confirm</a></footer></article></dialog><pre><code><<b>dialog</b><i>open</i>>
<<b>article</b>>
<<b>h3</b>>Confirm your action!</<b>h3</b>>
</<b>dialog</b>></code></pre><hgroup><h2>Live demo</h2><h3>Toggle a modal by clicking the button below.</h3></hgroup><article><buttonclass="contrast"data-target="modal-example"onclick="toggleModal(event)">Launch demo modal</button><footerclass="code"><pre><code><em><!-- Button to trigger the modal --></em>
</<b>dialog</b>></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: <ahref="https://github.com/picocss/pico/blob/master/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>></code> container.</p><pre><code><em><!-- Open modal--></em>
</code></pre><h2>Utilities</h2><p>Modals come with 3 utility classes.</p><p><code>.modal-is-open</code> prevents any scrolling and interactions below the modal.</p><pre><code><em><!doctype html></em>
</<b>html</b>></code></pre></section><footer><hr><p><small>Code licensed <ahref="https://github.com/picocss/pico/blob/master/LICENSE.md"class="secondary">MIT</a></small></p></footer></div></main><dialogid="modal-example"><article><ahref="#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><ahref="#cancel"role="button"class="secondary"data-target="modal-example"onclick="toggleModal(event)">Cancel</a><ahref="#confirm"role="button"data-target="modal-example"onclick="toggleModal(event)">Confirm</a></footer></article></dialog><scriptsrc="js/commons.min.js"></script><scriptsrc="js/modal.min.js"></script></body></html>
