123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Modals - Puppertino Framework</title>
- <link
- href="https://rsms.me/inter/inter.css"
- rel="stylesheet"
- />
-
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />
- <meta
- name="viewport"
- content="width=device-width, initial-scale=1, shrink-to-fit=no"
- />
- <meta http-equiv="x-ua-compatible" content="ie=edge" />
- <link rel="stylesheet" type="text/css" href="doc.css" />
- <meta
- name="description"
- content="This is the documentation for Modals on the Puppertino Framework, a framework that mimics Apple's design, woof!"
- />
- <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
- <!-- Global site tag (gtag.js) - Google Analytics -->
- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
- <script>
- window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', 'UA-176821843-1');
- </script>
- </head>
- <body class="p-layout">
- <div class="p-modal-background">
- <div class="p-modal" id="normal-modal" data-p-close-on-outside="true">
- <h2>Hello!</h2>
- <p>This modal has 3 buttons, please don't add more than 3 :)</p>
- <div class="p-modal-button-container">
- <a href="#"><strong>Confirm</strong></a>
- <a href="#">Settings</a>
- <button data-p-cancel>Cancel</button>
- </div>
- </div>
- <div class="p-modal" id="two-button-modal" data-p-close-on-outside="true">
- <h2>Alert!</h2>
- <p>This modals has 2 buttons!</p>
- <div class="p-modal-button-container">
- <a href="#" data-p-cancel>OK</a>
- <a href="#" data-p-cancel>Cancel</a>
- </div>
- </div>
- <div class="p-modal" id="one-button-modal">
- <h2>Alert!</h2>
- <p>
- Hope you are having an amazing day :)<br />
- Also this modal does not close when you click outside, you have to
- click the OK button
- </p>
- <div class="p-modal-button-container">
- <a href="#" data-p-cancel>OK</a>
- </div>
- </div>
- <div class="p-modal" id="example-modal">
- <h2>Hey!</h2>
- <p>
- This is an example modal! It does not feature the attribute
- data-p-close-on-outside, so it's not gonna close if you click outside
- of it
- </p>
- <div class="p-modal-button-container">
- <a href="#" data-p-cancel>OK</a>
- </div>
- </div>
- </div>
- <div class="route">
- <a
- href="https://codedgar.github.io/Puppertino/"
- class="p-btn p-btn-scope p-btn-scope-unactive"
- >Puppertino</a
- >
- <p>/</p>
- <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
- >Examples</a
- >
- <p>/</p>
- <a href="modals.html" class="p-btn p-btn-scope">Modals</a>
- </div>
- <h1>Modals</h1>
- <div class="master">
- <p>
- Modals are iconic in iOS design, making them a natural addition to Puppertino. Unlike macOS-style dialog boxes (planned for future versions), these modals are currently categorized under mobile components.
- <br><br>To implement modals, you’ll need:
- <a
- href="https://github.com/codedgar/Puppertino/blob/master/dist/css/modals.css"
- target="_blank"
- >Modals CSS</a
- >
- and
- <a
- href="https://github.com/codedgar/Puppertino/blob/master/src/js/modals.js"
- target="_blank"
- >Modals JS</a
- >
- alternatively you can use the
- <a
- href="https://github.com/codedgar/Puppertino/blob/master/dist/css/newfull.css"
- target="_blank"
- >Full CSS</a
- >
- (Not recommended if you are just going to use this component). Please be
- aware that you still need to download the JS of Modals, since at the
- time, there's no full.js
- </p>
- <div class="talk-about-it">
- <h3>Note on Previous Versions</h3>
- <p>In earlier versions of Puppertino, modal actions were exclusively links. In the latest version, you now have the option to use either <strong>Buttons</strong> or <strong>Links</strong>, offering greater flexibility for appropriate actions while maintaining proper semantics and accessibility.</p>
- </div>
- <div class="talk-about-it">
- <h2>Modals: Limitations</h2>
- <p>
- Puppertino modals are designed for simplicity and optimized user experience. However, there are current limitations to be aware of:
- </p>
- <ul>
- <li>Adding form elements within modals is <strong>not supported</strong> (planned for the next release).</li>
- <li>Opening multiple modals simultaneously is not supported to maintain usability.</li>
- </ul>
- <button data-p-open-modal="#normal-modal" class="p-btn">
- Three button modal
- </button>
- <button data-p-open-modal="#two-button-modal" class="p-btn">
- Two button modal
- </button>
- <button data-p-open-modal="#one-button-modal" class="p-btn">
- One button modal
- </button>
- </div>
- </div>
- <div class="talk-about-it">
- <h2>First steps.</h2>
- <p>
- To use modals, we need to have a master div where every modal will be
- located, as such:
- </p>
- <div class="code">
- <pre>
- <code class="html">
- <div class="p-modal-background">
- <!-- Your modals will be here -->
- </div>
- </code>
- </pre>
- </div>
- </div>
- <div class="talk-about-it">
- <h2>General usage.</h2>
- <p>
- To use modals, we need 2 principal components:
- <strong>A trigger for the modal</strong> and
- <strong>the modal itself</strong>. For the button to work, you need to
- add the attribute <code class="code">data-p-open-modal</code> followed
- by the ID of the actual modal. The actual modal can have from 1 to 3
- buttons, and if you add the attribute
- <code class="code">data-p-close-on-outside="true"</code> the modal will
- close if you click outside of it. Also, modals appear a little bit at
- the bottom in lower resolutions, just to make them easier to tap in
- mobile devices.<br />
- Also, if the <code class="code">data-p-cancel</code> attribute is
- present on a button of the modal, the modal will close when the user
- clicks the button.
- </p>
- <button data-p-open-modal="#example-modal" class="p-btn">
- Toggle Modal
- </button>
- <p>Usage:</p>
- <div class="code">
- <pre>
- <code class="html">
- <!-- The button that toggles the modal -->
- <a href="#" class="p-btn" data-p-open-modal="#example-modal">Default</a>
- <!-- Modal container, all the modals you use should be inside of it. -->
- <div class="p-modal-background">
- <!-- Your modals will be here -->
- <div class="p-modal" id="example-modal">
- <h2>Hey!</h2>
- <p>This is an example modal!</p>
- <div class="p-modal-button-container">
- <button data-p-cancel>OK</button>
- </div>
- </div>
- </div>
- </code>
- </pre>
- </div>
- </div>
- <div class="talk-about-it">
- <h2>Several Buttons in a modal.</h2>
- <p>
- Modals support having several buttons on them without breaking, but due
- to composition, you should not add more than 3 buttons, but if you need them, you are free to put them. To add more buttons, the
- only thing you need is to add another
- <code class="code"><a></code> element inside the Modal button
- container (<code class="code"
- ><div class="p-modal-button-container"></code
- >).
- </p>
- <button data-p-open-modal="#two-button-modal" class="p-btn">
- Toggle Modal
- </button>
- <p>Usage:</p>
- <div class="code">
- <pre>
- <code class="html">
- <div class="p-modal-button-container">
- <a href="#" data-p-cancel>OK</a>
- <a href="#">Settings</a>
- </div>
- </code>
- </pre>
- </div>
- </div>
- <div class="talk-about-it">
- <section id="api-methods">
- <h2>JS API Methods</h2>
- <p>In newer versions, the old JavaScript has been replaced with the PuppertinoModalMan class—a lightweight utility for managing modals within the Puppertino framework.
- <br><br>
- While the way you use modals remains unchanged thanks to automatic initialization, this class introduces programmatic methods for Opening or Closing modals, and handling user interactions. <br><br> Here's what currently possible using Puppertino's Modal Manager</p>
- <article id="open-modal" class="d-flex align-bottom mt-4">
- <div class="flex-1 w-100">
- <h3>openModal(selector)</h3>
- <p>Opens the modal specified by the CSS selector.</p>
- <p><strong>Parameters:</strong></p>
- <ul>
- <li><code class="code">selector</code> (string): CSS selector for the modal to open.</li>
- </ul>
- </div>
- <div class="flex-1 w-100">
- <p><strong>Usage:</strong></p>
- <div class="code" >
- <pre>
- <code>
- PuppertinoModalManager.openModal("#exampleModal");
- </code>
- </pre>
- </div>
- </div>
- </article>
-
- <article id="close-active-modal" class="d-flex align-bottom mt-4">
- <div class="flex-1 w-100">
- <h3>closeActiveModal()</h3>
- <p>Closes the currently active (open) modal.</p>
- </div>
- <div class="flex-1 w-100">
- <p><strong>Usage:</strong></p>
- <div class="code">
- <pre>
- <code>
- PuppertinoModalManager.closeActiveModal();
- </code>
- </pre>
- </div>
- </div>
-
- </article>
-
- <article id="close-modal" class="d-flex align-bottom mt-4">
- <div class="flex-1 w-100">
- <h3>closeModal(selector)</h3>
- <p>Closes a specific modal specified by the CSS selector.</p>
- <p><strong>Parameters:</strong></p>
- <ul>
- <li><code class="code">selector</code> (string): CSS selector for the modal to close.</li>
- </ul>
- </div>
- <div class="flex-1 w-100">
- <p><strong>Usage:</strong></p>
- <div class="code">
- <pre>
- <code>
- PuppertinoModalManager.closeModal("#exampleModal");
- </code>
- </pre>
- </div>
- </div>
- </article>
-
- <article id="is-modal-open" class="d-flex align-bottom mt-4">
- <div class="flex-1 w-100">
- <h3>isModalOpen(selector)</h3>
- <p>Checks if a specific modal is currently open.</p>
- <p><strong>Parameters:</strong></p>
- <ul>
- <li><code class="code">selector</code> (string): CSS selector for the modal to check.</li>
- </ul>
- <p><strong>Returns:</strong></p>
- <ul>
- <li><code class="code">true</code> if the modal is open, <code>false</code> otherwise.</li>
- </ul>
- </div>
- <div class="flex-1 w-100">
- <p><strong>Usage:</strong></p>
- <div class="code">
- <pre>
- <code>
- if (PuppertinoModalManager.isModalOpen("#exampleModal")) {
- console.log("The modal is open.");
- }
- </code>
- </pre>
- </div>
-
- </div>
-
- </article>
- </section>
- </div>
- <div class="talk-about-it">
- <h2>Support for blur on Firefox.</h2>
- <p>
- Modals use a backdrop-filter, which is currently supported by Firefox
- but you need to manually activate it, but in Puppertino there's a
- fallback, and for users who don't have active the backdrop-filter in
- Firefox, the modal will appear completely white.
- </p>
- </div>
-
- </body>
- <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
- <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/modals.js"></script>
- <script
- type="text/javascript"
- src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"
- ></script>
- <script>
- hljs.initHighlightingOnLoad();
- </script>
- </html>
|