Yoyo Popup
showYoyoPopup({
text: 'Created Successfully',
type: 'success',
timeOut: 5000,
});
showYoyoPopup({
text: 'Are you sure you want to proceed?',
subtext: 'This action cannot be undone.',
type: 'danger',
isStatic: true,
hasConfirmation: true,
hasCancellation: true,
confirmLabel: 'Yes, proceed',
cancelLabel: 'Cancel',
closeLabel: 'Close',
confirmFunction: ()=> functionConfirm(),
cancelFunction: ()=> functionCancel(),
closeFunction: () => alert('You click Close'),
});
showYoyoPopup({
text: 'What is python?',
type: 'info',
subtext: 'Python is a type of large, non-venomous snake found in Africa, Asia, and Australia. Pythons are known for their ability to constrict and suffocate their prey before swallowing it whole. They are often found in rainforests, grasslands, and swamps.',
});
showYoyoPopup({
text: 'Warning: Changes you made may not be saved.',
type: 'warning',
hasConfirmation: true,
confirmLabel: 'Yes, Continue',
confirmFunction: () => alert('You click Confirm!'),
closeLabel: 'Close',
isStatic: true,
});
showYoyoPopup({
text: 'Are you sure you want to log out?',
type: 'question',
hasConfirmation: true,
confirmLabel: 'Log Out',
closeLabel: 'Cancel',
confirmFunction: () => showYoyoPopup({
text: 'You click log out!',
type: 'info',
}),
isStatic: true,
});
npm install yoyo-popup
yarn add yoyo-popup
import { showYoyoPopup } from './node_modules/yoyo-popup/dist/yoyoPopup.min.mjs';
<script src="./node_modules/yoyo-popup/dist/yoyoPopup.umd.min.js"></script>
<!-- jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/gh/smallvi/yoyoPopup@latest/dist/yoyoPopup.umd.min.js"></script>
<!-- unpkg CDN -->
<script src="https://unpkg.com/yoyo-popup@latest/dist/yoyoPopup.umd.min.js"></script>
import { showYoyoPopup } from 'path/to/yoyoPopup.min.mjs';
<script src="path/to/yoyoPopup.umd.min.js"></script>
showYoyoPopup({
text: 'Done',
type: 'success',
});
showYoyoPopup({
text: 'Are you sure you want to proceed?',
subtext: 'This action cannot be undone.',
type: 'danger',
isStatic: true,
hasConfirmation: true,
hasCancellation: true,
confirmLabel: 'Yes, proceed',
cancelLabel: 'Cancel',
closeLabel: 'Close',
timeOut: 5000,
confirmFunction: ()=> functionConfirm(),
cancelFunction: ()=> functionCancel(),
closeFunction: () => alert('You click Close'),
});
| Description | |
|---|---|
textMandatory |
Main text displayed in the popup |
subtextOptional |
Additional text shown below the main text. |
typeOptional |
Icon type.('info', 'question', 'success', 'warning', 'danger') |
titleOptional |
Title of the popup. |
isStaticOptional |
Boolean indicating if the popup is static.(true, false) |
hasConfirmationOptional |
Boolean indicating if the popup includes a confirm button.(true, false) |
hasCancellationOptional |
Boolean indicating if the popup includes a cancel button.(true, false) |
confirmLabelOptional |
Text label for the confirm button. |
cancelLabelOptional |
Text label for the cancel button. |
closeLabelOptional |
Text label for the close button. |
formIdOptional |
ID of the form to submit. |
confirmFunctionOptional |
Function to call when the confirm button is pressed. |
cancelFunctionOptional |
Function to call when the cancel button is pressed. |
closeFunctionOptional |
Function to call when the close button is pressed. |
timeOutOptional |
Auto-close the popup after a specified time.(e.g., `1000` for 1 second) |