This modal has 3 buttons, please don't add more than 3 :)
This modals has 2 buttons!
Hope you are having an amazing day :)
Also this modal does not close when you click outside, you have to
click the OK button
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
Modals are one of the most emblematic items of iOS, so I added the modals of iOS instead of adding dialog boxes like in macOS. To use modals, you need 2 components: Modals CSS and Modals JS alternatively you can use the Full CSS (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
I wanted to make modals not only as easy to use as possible, but UX
optimized as I could. That's why I'm calling it now, adding form
elements in modals is not supported
Now onto modals and types:
To use modals, we need to have a master div where every modal will be located, as such:
<div class="p-modal-background">
<!-- Your modals will be here -->
</div>
To use modals, we need 2 principal components:
A trigger for the modal and
the modal itself. For the button to work, you need to
add the attribute data-p-open-modal followed
by the ID of the actual modal. The actual modal can have from 1 to 3
buttons, and if you add the attribute
data-p-close-on-outside="true" 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.
Also, if the data-p-cancel attribute is
present on a button of the modal, the modal will close when the user
clicks the button.
Usage:
<!-- 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">
<a href="#" data-p-cancel>OK</a>
</div>
</div>
</div>
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
<a> element inside the Modal button
container (<div class="p-modal-button-container">).
Usage:
<div class="p-modal-button-container">
<a href="#" data-p-cancel>OK</a>
<a href="#">Settings</a>
</div>
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.