Create iOS-Style Popups & Notifications With Popup JS Library

Preview:

Description:

PopupJS is a lightweight and fast JavaScript library that lets you easily create iOS-style bottom sheets, alert/confirmation/prompt dialogs, toast messages, and full-width notification bars on your website.

The popup library provides a set of functions to handle different popup needs.

The bottom sheet feature, for instance, replicates the smooth, slide-up behavior found in iOS interfaces. It’s perfect for displaying menus, options, or additional information without taking over the entire screen.

Alert and confirmation dialogs provide a familiar way to communicate with users, prompting them for input or confirming actions.

Toast notifications are excellent for quick, unobtrusive messages, while notification bars allow you to present more persistent alerts or announcements.

How to use it:

1. Download the Popup JS Library and include the following files on the webpage.

<link rel="stylesheet" href="pu.min.css" />
<script src="pu.min.js"></script>

2. Use the pujs.pullOut() method to create a bottom sheet that slides up from the bottom of the screen. You can customize its content, scrolling behavior, and assign a unique ID.

pujs.pullOut(html, scroll, id, options = {})

3. The pujs.popup() method facilitates the creation of iOS-style alert, confirm, and prompt dialogs. These dialogs allow you to present information, ask questions, and collect user input.

• title: The title of the dialog.
• message: The message displayed within the dialog.
• buttons: An array of button objects, each with properties like text and callback.
• buttonType: The type of buttons to use (e.g., “ok-cancel”, “yes-no”).
• input: If needed, an input field can be included for user input.

pujs.popup(title, message, buttons, buttonType, input, options = {})

4. Utilize the pujs.alert() method to display toast-like notifications. You can specify the message, type (e.g., error, success), display duration, and whether the text should be selectable.

pujs.alert(message, type, timeout, selectable, options = {})

5. Create full-width notification bars using the pujs.lastingBanner() method. You can customize the content, type, position, buttons, and assign a unique ID.

pujs.lastingBanner(html, type, pos, buttons, id, options = {})

6. Avoid adding padding or margin to the body or html elements when styling your page. PopupJS includes a built-in screen locking mechanism to prevent interaction with the underlying page while a popup is active.

// Lock the screen
pujs.lockscreen(); 
// Unlock the screen
pujs.lockscreen.unlock();

Changelog:

01/11/2025

• v1.4.2