Puppertino

/

Examples

/

Modals

Modals

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.

To implement modals, you’ll need: 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

Note on Previous Versions

In earlier versions of Puppertino, modal actions were exclusively links. In the latest version, you now have the option to use either Buttons or Links, offering greater flexibility for appropriate actions while maintaining proper semantics and accessibility.

Modals: Limitations

Puppertino modals are designed for simplicity and optimized user experience. However, there are current limitations to be aware of:

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">
			<button data-p-cancel>OK</button>
		</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>

JS API Methods

In newer versions, the old JavaScript has been replaced with the PuppertinoModalMan class—a lightweight utility for managing modals within the Puppertino framework.

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.

Here's what currently possible using Puppertino's Modal Manager

openModal(selector)

Opens the modal specified by the CSS selector.

Parameters:

  • selector (string): CSS selector for the modal to open.

Usage:

    
PuppertinoModalManager.openModal("#exampleModal");

closeActiveModal()

Closes the currently active (open) modal.

Usage:

  
PuppertinoModalManager.closeActiveModal();

closeModal(selector)

Closes a specific modal specified by the CSS selector.

Parameters:

  • selector (string): CSS selector for the modal to close.

Usage:

  
PuppertinoModalManager.closeModal("#exampleModal");

isModalOpen(selector)

Checks if a specific modal is currently open.

Parameters:

  • selector (string): CSS selector for the modal to check.

Returns:

  • true if the modal is open, false otherwise.

Usage:

  
if (PuppertinoModalManager.isModalOpen("#exampleModal")) {
  console.log("The modal is open.");
}

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.