1 | <!doctype html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | ${require('./_head.html')
|
5 | title="Modal"
|
6 | description="A flexible container with graceful spacings across devices and viewports."
|
7 | canonical="modal.html"
|
8 | }
|
9 | </head>
|
10 |
|
11 | <body>
|
12 | ${require('./_nav.html')}
|
13 |
|
14 | <main class="container" id="docs">
|
15 | ${require('./_sidebar.html') active="modal-link"}
|
16 |
|
17 | <div role="document">
|
18 | <section id="modal">
|
19 | <hgroup>
|
20 | <h1>Modal</h1>
|
21 | <h2>The classic modal element with graceful spacings across devices and viewports.</h2>
|
22 | </hgroup>
|
23 |
|
24 | <p>Modals are built with <code><<b>dialog</b>></code> as a wrapper and <code><<b>article</b>></code> as a content container.</p>
|
25 | <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>
|
26 |
|
27 | <dialog class="example" open>
|
28 | <article>
|
29 | <header>
|
30 | <a href="#close" aria-label="Close" class="close" onclick="event.preventDefault()"></a>
|
31 | <p>Modal title</p>
|
32 | </header>
|
33 | <p>
|
34 | Nunc nec ligula a tortor sollicitudin dictum in vel enim.
|
35 | Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
|
36 | Sed eleifend a dui nec ullamcorper.
|
37 | Praesent vehicula lacus ac justo accumsan ullamcorper.
|
38 | </p>
|
39 | </article>
|
40 | </dialog>
|
41 |
|
42 | <pre><code><<b>dialog</b> <i>open</i>>
|
43 | <<b>article</b>>
|
44 | <<b>header</b>>
|
45 | <<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>>
|
46 | Modal title
|
47 | </<b>header</b>>
|
48 | <<b>p</b>>
|
49 | Nunc nec ligula a tortor sollicitudin dictum in vel enim.
|
50 | Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
|
51 | Sed eleifend a dui nec ullamcorper.
|
52 | Praesent vehicula lacus ac justo accumsan ullamcorper.
|
53 | </<b>p</b>>
|
54 | </<b>article</b>>
|
55 | </<b>dialog</b>></code></pre>
|
56 |
|
57 | <p>Inside <code><<b>footer</b>></code>, the content is right aligned by default.</p>
|
58 |
|
59 | <dialog class="example" open>
|
60 | <article>
|
61 | <h3>Confirm your action!</h3>
|
62 | <p>
|
63 | Mauris non nibh vel nisi sollicitudin malesuada.
|
64 | Donec ut sagittis erat. Praesent eu eros felis.
|
65 | Ut consectetur placerat pulvinar.
|
66 | </p>
|
67 | <footer>
|
68 | <a href="#cancel" role="button" class="secondary" onclick="event.preventDefault()">Cancel</a><a href="#confirm" role="button" onclick="event.preventDefault()">Confirm</a>
|
69 | </footer>
|
70 | </article>
|
71 | </dialog>
|
72 |
|
73 | <pre><code><<b>dialog</b> <i>open</i>>
|
74 | <<b>article</b>>
|
75 | <<b>h3</b>>Confirm your action!</<b>h3</b>>
|
76 | <<b>p</b>>
|
77 | Mauris non nibh vel nisi sollicitudin malesuada.
|
78 | Donec ut sagittis erat. Praesent eu eros felis.
|
79 | Ut consectetur placerat pulvinar.
|
80 | </<b>p</b>>
|
81 | <<b>footer</b>>
|
82 | <<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>>
|
83 | <<b>a</b> <i>href</i>=<u>"#confirm"</u> <i>role</i>=<u>"button"</u>>Confirm</<b>a</b>>
|
84 | </<b>footer</b>>
|
85 | </<b>article</b>>
|
86 | </<b>dialog</b>></code></pre>
|
87 |
|
88 | <hgroup>
|
89 | <h2>Live demo</h2>
|
90 | <h3>Toggle a modal by clicking the button below.</h3>
|
91 | </hgroup>
|
92 |
|
93 | <article>
|
94 | <button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button>
|
95 | <footer class="code">
|
96 |
|
97 | <pre><code><em><!-- Button to trigger the modal --></em>
|
98 | <<b>button</b> <i>class</i>=<u>"contrast"</u>
|
99 | <i>data-target</i>=<u>"modal-example"</u>
|
100 | <i>onClick</i>=<u>"toggleModal(event)"</u>>
|
101 | Launch demo modal
|
102 | </<b>button</b>>
|
103 |
|
104 | <em><!-- Modal --></em>
|
105 | <<b>dialog</b> <i>id</i>=<u>"modal-example"</u>>
|
106 | <<b>article</b>>
|
107 | <<b>a</b> <i>href</i>=<u>"#close"</u>
|
108 | <i>aria-label</i>=<u>"Close"</u>
|
109 | <i>class</i>=<u>"close"</u>
|
110 | <i>data-target</i>=<u>"modal-example"</u>
|
111 | <i>onClick</i>=<u>"toggleModal(event)"</u>>
|
112 | </<b>a</b>>
|
113 | <<b>h3</b>>Confirm your action!</<b>h3</b>>
|
114 | <<b>p</b>>
|
115 | Cras sit amet maximus risus.
|
116 | Pellentesque sodales odio sit amet augue finibus pellentesque.
|
117 | Nullam finibus risus non semper euismod.
|
118 | </<b>p</b>>
|
119 | <<b>footer</b>>
|
120 | <<b>a</b> <i>href</i>=<u>"#cancel"</u>
|
121 | <i>role</i>=<u>"button"</u>
|
122 | <i>class</i>=<u>"secondary"</u>
|
123 | <i>data-target</i>=<u>"modal-example"</u>
|
124 | <i>onClick</i>=<u>"toggleModal(event)"</u>>
|
125 | Cancel
|
126 | </<b>a</b>>
|
127 | <<b>a</b> <i>href</i>=<u>"#confirm"</u>
|
128 | <i>role</i>=<u>"button"</u>
|
129 | <i>data-target</i>=<u>"modal-example"</u>
|
130 | <i>onClick</i>=<u>"toggleModal(event)"</u>>
|
131 | Confirm
|
132 | </<b>a</b>>
|
133 | </<b>footer</b>>
|
134 | </<b>article</b>>
|
135 | </<b>dialog</b>></code></pre>
|
136 |
|
137 | </footer>
|
138 | </article>
|
139 |
|
140 | <p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p>
|
141 | <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>
|
142 | <p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code><<b>dialog</b></u>></code> container.</p>
|
143 |
|
144 | <pre><code><em><!-- Open modal--></em>
|
145 | <<b>dialog</b> <i>open</i>>
|
146 | <<b>article</b>>
|
147 | <em>…</em>
|
148 | </<b>article</b>>
|
149 | </<b>dialog</b>>
|
150 |
|
151 | <em><!-- Modal closed --></em>
|
152 | <<b>dialog</b>>
|
153 | <<b>article</b>>
|
154 | <em>…</em>
|
155 | </<b>article</b>>
|
156 | </<b>dialog</b>>
|
157 | </code></pre>
|
158 |
|
159 | <h2>Utilities</h2>
|
160 | <p>Modals come with 3 utility classes.</p>
|
161 | <p>ℹ️ These classes are not available in the <a href="classless.html">class-less version</a>.</p>
|
162 | <p><code>.modal-is-open</code> prevents any scrolling and interactions below the modal.</p>
|
163 |
|
164 | <pre><code><em><!doctype html></em>
|
165 | <<b>html</b> <i>class</i>=<u>"modal-is-open"</u>>
|
166 | <em>…</em>
|
167 | </<b>html</b>></code></pre>
|
168 |
|
169 | <p><code>.modal-is-opening</code> brings an opening animation.</p>
|
170 |
|
171 | <pre><code><em><!doctype html></em>
|
172 | <<b>html</b> <i>class</i>=<u>"modal-is-open modal-is-opening"</u>>
|
173 | <em>…</em>
|
174 | </<b>html</b>></code></pre>
|
175 |
|
176 | <p><code>.modal-is-closing</code> brings a closing animation.</p>
|
177 |
|
178 | <pre><code><em><!doctype html></em>
|
179 | <<b>html</b> <i>class</i>=<u>"modal-is-open modal-is-closing"</u>>
|
180 | <em>…</em>
|
181 | </<b>html</b>></code></pre>
|
182 |
|
183 | </section>
|
184 |
|
185 | ${require('./_footer.html')}
|
186 |
|
187 | </div>
|
188 | </main>
|
189 |
|
190 | <dialog id="modal-example">
|
191 | <article>
|
192 | <a href="#close" aria-label="Close" class="close" data-target="modal-example" onclick="toggleModal(event)"></a>
|
193 | <h3>Confirm your action!</h3>
|
194 | <p>Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.</p>
|
195 | <footer>
|
196 | <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>
|
197 | </footer>
|
198 | </article>
|
199 | </dialog>
|
200 |
|
201 | <script src="js/commons.min.js"></script>
|
202 | <script src="js/modal.min.js"></script>
|
203 |
|
204 | </script>
|
205 | </body>
|
206 | </html> |
\ | No newline at end of file |