Customizable Alerts & Dialogs Made Easy – Yoyo Popup

Yoyo Popup is a JavaScript library that creates customizable toast alerts, confirmation dialogs, and modal popups.

It currently comes with five distinct types—info, question, success, warning, and danger—each with its own icon for immediate identification.

How to use it:

1. Download the Yoyo Popup package and include the ‘yoyo-popup.min.js’ script on the page.

<script src="/path/to/yoyo-popup.min.js"></script>

2. Now, let’s create a basic ‘warning’ alert popup with the showYoyoPopup method. This will generate a simple alert popup that remains on the screen until the user clicks the close button.

showYoyoPopup({
  text: 'This is a default popup',
});

3. Create a toast-style alert notification that will disappear automatically after a set time. This alert also includes a countdown timer to indicate how much time remains before it closes.

showYoyoPopup({
  text: 'This is a toast popup',
  timeOut: 5000 // 5 seconds
});

4. Prompt users with a confirmation dialog that includes custom buttons and callback functions. It allows you to capture user intent and respond accordingly based on their selection.

showYoyoPopup({
  text: 'Are you sure to delete this file?',
  subtext: 'This action cannot be undone.',
  type: 'danger',
  isStatic: true,
  hasConfirmation: true,
  hasCancellation: true,
  confirmLabel: 'Yes',
  cancelLabel: 'Cancel',
  closeLabel: 'Close',
  formId: '',
  confirmFunction: () => functionConfirm(),
  cancelFunction: () => functionCancel(),
  closeFunction: () => functionClose(),
});

5. All the default options for customizing your popups, including text content, icons, buttons, and behavior.

{
  title = '',
  text = 'Are you sure?',
  subtext = null,
  type = 'warning', // 'info','question','success','warning','danger'
  isStatic = false, // true = close the popup on click outside
  hasConfirmation = false,
  hasCancellation = false,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  closeLabel = 'Close',
  formId = '',
  confirmFunction = () => { },
  cancelFunction = () => { },
  closeFunction = () => { },
  timeOut = 0,
}

Changelog:

v1.0.0 (08/15/2024)

• First Release