mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 01:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Docs: Modal

Browse source
This commit is contained in:
Lucas Larroche 2021-11-08 09:36:22 +07:00
parent 0b3f1656f2
commit 31c16b00ca
4 changed files with 34 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

25
docs/src/modal.html
View file

@ -138,7 +138,30 @@
</footer>
</article>
<p>As Pico focuses on CSS styles, we have not integrated any JavaScript in the library.</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: <a href="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>&lt;<b>dialog</b></u>&gt;</code> container.</p>
<pre><code><em>&lt;!-- Open modal--&gt;</em>
&lt;<b>dialog</b> <i>open</i>&gt;
&lt;/<b>dialog</b>&gt;
<em>&lt;!-- Modal closed --&gt;</em>
&lt;<b>dialog</b>&gt;
&lt;/<b>dialog</b>&gt;
</code></pre>
<h2>Utilities</h2>
<p>Modals come with 3 utility classes.</p>
<p><code>&lt;<b>html</b> <i>class</i>=<u>"modal-is-open"</u>&gt;</code> blurs the background and blocks any scrolling and interactions below the modal.</p>
<p><code>&lt;<b>html</b> <i>class</i>=<u>"modal-is-opening"</u>&gt;</code> brings an opening animation.</p>
<p><code>&lt;<b>html</b> <i>class</i>=<u>"modal-is-closing"</u>&gt;</code> brings a closing animation.</p>
</section>