mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 13:56:27 +02:00
Code Issues Releases Wiki Activity

Complete modal component

Browse Source 
The modal component is now documented and completed fully.
This commit is contained in:
Angelos Chalaris
2017-06-06 09:54:46 +03:00
parent 57e608bf79
commit 61ad457605
24 changed files with 182 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/quick_reference.html
View File

@@ -1025,6 +1025,30 @@
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Modals <a href="https://codepen.io/chalarangelo/pen/rwagLK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;label for=&quot;modal-toggle&quot;&gt;Show modal&lt;/label&gt;
&lt;input id=&quot;modal-toggle&quot; type=&quot;checkbox&quot;/&gt;
&lt;div class=&quot;modal&quot;&gt;
&lt;div class=&quot;card&quot;&gt;
&lt;label for=&quot;modal-toggle&quot; class=&quot;close&quot;&gt;&lt;/label&gt;
&lt;h3 class=&quot;section&quot;&gt;Modal&lt;/h3&gt;
&lt;p class=&quot;section&quot;&gt;This is a modal window!&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul style="text-align:justify">
<li>Create an <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> element, immediately followed by a <code>&lt;div&gt;</code> element with the <code>.modal</code> class</li>
<li>Use a <code>.card</code> inside the <code>.modal</code> to display contents</li>
<li>Remember to use a <code>&lt;label&gt;</code> or some Javascript to allow users to close the dialog</li>
<li>Modal dialogs can be placed and toggled from anywhere, although the structure must be kept intact</li>
</ul>
</div>
</div>
</div>
</div>
</div>