Puppertino

/

Examples

/

Modals

Modals

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

Before jumping on it.

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 will be added in the next release, and also opening several modals is not supported either.
Now onto modals and types:

First steps.

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>
				
			

General usage.

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>
				
			

Several Buttons in a modal.

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>

				
			

Support for blur on Firefox.

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.