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.
<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.
<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.
As Pico focuses on CSS styles, we have not integrated any JavaScript in the library.