diff options
1 files changed, 353 insertions, 0 deletions
| -rw-r--r-- | docs/components/modals.html | 353 |
diff --git a/docs/components/modals.html b/docs/components/modals.html new file mode 100644 index 0000000..eb5549a --- /dev/null +++ b/docs/components/modals.html @@ -0,0 +1,353 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Modals - Components - Spectre.css CSS Framework</title> + <meta charset="utf-8"> + <meta name="robots" content="index, follow"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="author" content="Yan Zhu"> + <link rel="shortcut icon" href="../img/favicons/favicon.ico"> + <link rel="icon" href="../img/favicons/favicon.png"> + <link rel="stylesheet" href="../dist/spectre.min.css"> + <link rel="stylesheet" href="../dist/spectre-icons.min.css"> + <link rel="stylesheet" href="../dist/spectre-exp.min.css"> + <link rel="stylesheet" href="../dist/docs.min.css"> + <link rel="canonical" href="https://picturepan2.github.io/spectre/components/modals.html"> + </head> + <body> + <div class="docs-container off-canvas off-canvas-sidebar-show"> + <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a> + <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div> + </div> + <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> + <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>SPECTRE</h2></a> + </div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../getting-started/installation.html">Installation</a> + </li> + <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a> + </li> + <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a> + </li> + <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-elements">Elements</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../elements/typography.html">Typography</a> + </li> + <li class="menu-item"><a href="../elements/tables.html">Tables</a> + </li> + <li class="menu-item"><a href="../elements/buttons.html">Buttons</a> + </li> + <li class="menu-item"><a href="../elements/forms.html">Forms</a> + </li> + <li class="menu-item"><a href="../elements/icons.html">Icons</a> + </li> + <li class="menu-item"><a href="../elements/labels.html">Labels</a> + </li> + <li class="menu-item"><a href="../elements/code.html">Code</a> + </li> + <li class="menu-item"><a href="../elements/media.html">Media</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-layout">Layout</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a> + </li> + <li class="menu-item"><a href="../layout/responsive.html">Responsive</a> + </li> + <li class="menu-item"><a href="../layout/navbar.html">Navbar</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/> + <label class="accordion-header c-hand" for="accordion-components">Components</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../components/accordions.html">Accordions</a> + </li> + <li class="menu-item"><a href="../components/avatars.html">Avatars</a> + </li> + <li class="menu-item"><a href="../components/badges.html">Badges</a> + </li> + <li class="menu-item"><a href="../components/bars.html">Bars</a> + </li> + <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a> + </li> + <li class="menu-item"><a href="../components/cards.html">Cards</a> + </li> + <li class="menu-item"><a href="../components/chips.html">Chips</a> + </li> + <li class="menu-item"><a href="../components/empty.html">Empty states</a> + </li> + <li class="menu-item"><a href="../components/menu.html">Menu</a> + </li> + <li class="menu-item"><a href="../components/modals.html">Modals</a> + </li> + <li class="menu-item"><a href="../components/nav.html">Nav</a> + </li> + <li class="menu-item"><a href="../components/pagination.html">Pagination</a> + </li> + <li class="menu-item"><a href="../components/panels.html">Panels</a> + </li> + <li class="menu-item"><a href="../components/popovers.html">Popovers</a> + </li> + <li class="menu-item"><a href="../components/steps.html">Steps</a> + </li> + <li class="menu-item"><a href="../components/tabs.html">Tabs</a> + </li> + <li class="menu-item"><a href="../components/tiles.html">Tiles</a> + </li> + <li class="menu-item"><a href="../components/toasts.html">Toasts</a> + </li> + <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../utilities/colors.html">Colors</a> + </li> + <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a> + </li> + <li class="menu-item"><a href="../utilities/display.html">Display</a> + </li> + <li class="menu-item"><a href="../utilities/divider.html">Divider</a> + </li> + <li class="menu-item"><a href="../utilities/loading.html">Loading</a> + </li> + <li class="menu-item"><a href="../utilities/position.html">Position</a> + </li> + <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a> + </li> + <li class="menu-item"><a href="../utilities/text.html">Text</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> + </li> + <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> + </li> + <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a> + </li> + <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a> + </li> + <li class="menu-item"><a href="../experimentals/filters.html">Filters</a> + </li> + <li class="menu-item"><a href="../experimentals/meters.html">Meters</a> + </li> + <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a> + </li> + <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a> + </li> + <li class="menu-item"><a href="../experimentals/progress.html">Progress</a> + </li> + <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a> + </li> + <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a> + </li> + </ul> + </div> + </div> + </div> + </div> + </div><a class="off-canvas-overlay" href="#close"></a> + <div class="off-canvas-content"> + <div class="docs-content" id="content"> + <div class="container" id="modals"> + <h3 class="s-title">Modals<a class="anchor" href="#modals" aria-hidden="true">#</a></h3> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> + <p>Modals are flexible dialog prompts.</p> + <div class="docs-demo columns"> + <div class="column"><a class="btn btn-primary" href="#example-modal-1">Open Modal</a> + <div class="modal" id="example-modal-1"><a class="modal-overlay" href="#modals" aria-label="Close"></a> + <div class="modal-container" role="document"> + <div class="modal-header"><a class="btn btn-clear float-right" href="#modals" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <p>This is the content inside the modal.</p> + <h4>Lorem ipsum</h4> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + <h4>Cupcake ipsum</h4> + <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> + <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> + <h4>Candy ipsum</h4> + <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> + <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-primary">Share</button><a class="btn btn-link" href="#modals">Close</a> + </div> + </div> + </div> + </div> + </div> + <p>Add a container element with the <code>modal</code> class. + And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. + You can add child elements with the <code>modal-header</code>, <code>modal-body</code> and <code>modal-footer</code> - any or all of them. + </p> + <p> + Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. + To make a modal appear, add the <code>active</code> class to the <code>modal</code> container. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal active"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-id"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-overlay"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title h5"</span>></span>Modal title<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span> + <span class="hljs-comment"><!-- content here --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>></span> + ... + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <h4 class="s-subtitle" id="modals-sizes">Modal sizes<a class="anchor" href="#modals-sizes" aria-hidden="true">#</a></h4> + <div class="docs-demo columns"> + <div class="column col-6 col-xs-12"><a class="btn btn-primary" href="#example-modal-2">Open small size Modal</a> + <div class="modal modal-sm" id="example-modal-2"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a> + <div class="modal-container" role="document"> + <div class="modal-header"><a class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-7">Name</label> + <input class="form-input" id="input-example-7" type="text" placeholder="Name"> + </div> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender"><i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" checked=""><i class="form-icon"></i> Female + </label> + </div> + </form> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-primary">Submit</button><a class="btn btn-link" href="#modals-sizes" aria-label="Close">Close</a> + </div> + </div> + </div> + </div> + </div> + <p>Use the <code>modal-sm</code> class for a smaller modal dialog. + The container max width is <code>320px</code>. + </p> + <div class="docs-demo columns"> + <div class="column"><a class="btn btn-primary" href="#example-modal-3">Open large size Modal</a> + <div class="modal modal-lg" id="example-modal-3"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a> + <div class="modal-container" role="document"> + <div class="modal-header"><a class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a> + <div class="modal-title h5">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <p>This is the content inside the modal.</p> + <h4>Lorem ipsum</h4> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + <h4>Cupcake ipsum</h4> + <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> + <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> + <h4>Candy ipsum</h4> + <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> + <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-primary">Share</button><a class="btn btn-link" href="#modals-sizes">Close</a> + </div> + </div> + </div> + </div> + </div> + <p>Use the <code>modal-lg</code> class for a full size modal. + The container max width is <code>960px</code>. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal modal-sm"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-overlay"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>></span> + <span class="hljs-comment"><!-- modal structure here --></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> + </div> + <div class="docs-footer container grid-lg" id="copyright"> + <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </div> + </div> + </div> + </div> + <script> + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-2702768-8', 'auto'); + ga('send', 'pageview'); + </script> + </body> +</html>
\ No newline at end of file |