2021-11-08 00:08:17 +07:00
<!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 >
2021-11-14 11:21:50 +07:00
< 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 >
< dialog class = "example" open >
< article >
< header >
< a href = "#close" aria-label = "Close" class = "close" onclick = "event.preventDefault()" > < / a >
< p > Modal title< / p >
< / 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 >
< pre > < code > < < b > dialog< / b > < i > open< / i > >
< < b > article< / b > >
< < b > header< / b > >
< < b > a< / b > < i > href< / i > =< u > "#close"< / u > < i > aria-label< / i > =< u > "Close"< / u > < i > class< / i > =< u > "close"< / u > > < /< b > a< / b > >
Modal title
< /< b > header< / b > >
< < b > p< / b > >
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 >
< dialog class = "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 >
< 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 > < < b > dialog< / b > < i > open< / i > >
< < b > article< / b > >
< < b > h3< / b > > Confirm your action!< /< b > h3< / b > >
< < b > p< / b > >
Mauris non nibh vel nisi sollicitudin malesuada.
Donec ut sagittis erat. Praesent eu eros felis.
Ut consectetur placerat pulvinar.
< /< b > p< / b > >
< < b > footer< / b > >
< < b > a< / b > < i > href< / i > =< u > "#cancel"< / u > < i > role< / i > =< u > "button"< / u > < i > class< / i > =< u > "secondary"< / u > > Cancel< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#confirm"< / u > < i > role< / i > =< u > "button"< / u > > Confirm< /< b > a< / b > >
< /< b > footer< / b > >
< /< b > article< / b > >
< /< b > dialog< / b > > < / code > < / pre >
< hgroup >
< h2 > Live demo< / h2 >
< h3 > Toggle a modal by clicking the button below.< / h3 >
< / hgroup >
2021-11-08 00:08:17 +07:00
< article >
< button class = "contrast" data-target = "modal-example" onclick = "toggleModal(event)" > Launch demo modal< / button >
2021-11-14 11:21:50 +07:00
< footer class = "code" >
< pre > < code > < em > < !-- Button to trigger the modal --> < / em >
< < b > button< / b > < i > class< / i > =< u > "contrast"< / u >
< i > data-target< / i > =< u > "modal-example"< / u >
2021-12-31 10:57:06 +07:00
< i > onClick< / i > =< u > "toggleModal(event)"< / u > >
2021-11-14 11:21:50 +07:00
Launch demo modal
< /< b > button< / b > >
< em > < !-- Modal --> < / em >
< < b > dialog< / b > < i > id< / i > =< u > "modal-example"< / u > >
< < b > article< / b > >
< < b > a< / b > < i > href< / i > =< u > "#close"< / u >
2022-01-04 22:26:21 +07:00
< i > aria-label< / i > =< u > "Close"< / u >
2021-11-14 11:21:50 +07:00
< i > class< / i > =< u > "close"< / u >
< i > data-target< / i > =< u > "modal-example"< / u >
2021-12-31 10:57:06 +07:00
< i > onClick< / i > =< u > "toggleModal(event)"< / u > >
2021-11-14 11:21:50 +07:00
< /< b > a< / b > >
< < b > h3< / b > > Confirm your action!< /< b > h3< / b > >
< < b > p< / b > >
Cras sit amet maximus risus.
Pellentesque sodales odio sit amet augue finibus pellentesque.
Nullam finibus risus non semper euismod.
< /< b > p< / b > >
< < b > footer< / b > >
< < b > a< / b > < i > href< / i > =< u > "#cancel"< / u >
2022-01-04 22:26:21 +07:00
< i > role< / i > =< u > "button"< / u >
2021-11-14 11:21:50 +07:00
< i > class< / i > =< u > "secondary"< / u >
< i > data-target< / i > =< u > "modal-example"< / u >
2021-12-31 10:57:06 +07:00
< i > onClick< / i > =< u > "toggleModal(event)"< / u > >
2021-11-14 11:21:50 +07:00
Cancel
< /< b > a< / b > >
< < b > a< / b > < i > href< / i > =< u > "#confirm"< / u >
< i > role< / i > =< u > "button"< / u >
< i > data-target< / i > =< u > "modal-example"< / u >
2021-12-31 10:57:06 +07:00
< i > onClick< / i > =< u > "toggleModal(event)"< / u > >
2021-11-14 11:21:50 +07:00
Confirm
< /< b > a< / b > >
< /< b > footer< / b > >
< /< b > article< / b > >
< /< b > dialog< / b > > < / code > < / pre >
< / footer >
2021-11-08 00:08:17 +07:00
< / article >
2021-11-14 11:21:50 +07:00
< p > Pico does not include JavaScript code. You will need to implement your JS to interact with modals.< / p >
2021-12-19 11:15:58 +07:00
< p > As a starting point, you can look at the JavaScript used in this documentation: < a href = "https://github.com/picocss/pico/blob/master/docs/js/modal.js" > js/modal.js< / a > .< / p >
2021-11-14 11:21:50 +07:00
< 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 > article< / b > >
< em > …< / em >
< /< b > article< / b > >
< /< b > dialog< / b > >
< em > < !-- Modal closed --> < / em >
< < b > dialog< / b > >
< < b > article< / b > >
< em > …< / em >
< /< b > article< / b > >
< /< b > dialog< / b > >
< / 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 > < i > class< / i > =< u > "modal-is-open"< / u > >
< em > …< / em >
< /< b > html< / b > > < / code > < / pre >
< p > < code > .modal-is-opening< / code > brings an opening animation.< / p >
< pre > < code > < em > < !doctype html> < / em >
< < b > html< / b > < i > class< / i > =< u > "modal-is-open modal-is-opening"< / u > >
< em > …< / em >
< /< b > html< / b > > < / code > < / pre >
< p > < code > .modal-is-closing< / code > brings a closing animation.< / p >
< pre > < code > < em > < !doctype html> < / em >
< < b > html< / b > < i > class< / i > =< u > "modal-is-open modal-is-closing"< / u > >
< em > …< / em >
< /< b > html< / b > > < / code > < / pre >
2021-11-08 00:08:17 +07:00
< / 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 >
< 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 >
< script src = "js/commons.min.js" > < / script >
< script src = "js/modal.min.js" > < / script >
< / script >
< / body >
2021-11-14 11:21:50 +07:00
< / html >
