ماژول ها - Hello popup
Hello popup is a user interface component & script that can display alert messages and toasts to users and handle popup interactions. You can add custom buttons, timeout, forms, icons, etc.
Installation
jQuery is required for this module, that means you have to load jQuery before module (jQuery 3.2.1 or higher is recommended), then link module stylesheet and script:
<!-- jQuery -->
<script src="jquery.js"></script>
<!-- Hello module -->
<link rel="stylesheet" href="hello.css">
<script src="hello.js"></script>How to use
Simply by calling Hello.fire(options) where
options is your alert options object. Here's some examples:
Simple alert
Hello.fire({
title: "Hello world!",
text: "Popups are awesome!"
});Toast box
Hello.fire({
text: "Hey there 👋",
type: "toast",
position: "mm", // Middle Middle
timeout: 3000 // 3 seconds
});Options
title: popup title
type -> string, default -> ""
Values: any string
text: popup text
type -> string, default -> ""
Values: any string
type: popup type
type -> string, default -> "popup"
Values: "popup" | "toast" | "card"
id: popup ID (set it to null to auto-generate ID)
type -> string | null, default -> null
Values: null | any string
theme: popup theme (for default theme use "default")
type -> string, default -> "theme"
Values: theme name string
mode: popup theme mode (light-mode and dark-mode)
type -> string, default -> "light"
Values: "light" | "dark"
confirmButton: confirm button text or data object
type -> boolean | string | object, default -> "Okay"
Values: false (for hiding button) | any string | data object
See examples for more details
cancelButton: cancel button text or data object
type -> boolean | string | object, default -> false
Values: false (for hiding button) | any string | data object
See examples for more details
popOnClick: show popup after clicking on specific elements
type -> string, default -> ""
Values: element query selector string
Example: ".my-class", "#my-id", "button.btn"
autoDelete: destroy popup after closing
type -> boolean, default -> true
Values: true | false
Example: ".my-class", "#my-id", "button.btn"
forms: forms handler object
type -> object, default -> {}
Values: handlers object
See examples for more details
buttons: extra buttons array
type -> array, default -> []
Values: buttons array
See examples for more details
allowOutsideClick: close popup by clicking the outside of popup
type -> boolean, default -> true
Values: true | false
allowEscapeKey: close popup by pressing escape key on keyboard
type -> boolean, default -> true
Values: true | false
showLoader: show loading bar above popup box
type -> boolean, default -> false
Values: true | false
singleMode: whether to close all other popups after building it
type -> boolean, default -> true
Values: true | false
timeout: close popup after timeout reached (set null to disable)
type -> null | int, default -> null
Values: null | timeout number in milliseconds
autoFocus: focus on confirm button after displaying
type -> bool, default -> true
Values: true | false
position: toast position
type -> string, default -> "mm"
Values: lt (left top) | lm (left middle) | lb (left bottom) mt (middle top) | mm (middle middle) | mb (middle bottom) | rt (right top) | rm (right middle) | rb (right bottom)
toastOffset: toast space from screen edges
type -> int, default -> 10
Values: margin number in pixels
icon: popup icon
type -> "string", default -> ""
Values: "success" | "info" | "error" | "warning"
onBuild(): calls after popup built
type -> callable, default -> () => null
Values: callback function
See examples for more details
onConfirm(): calls on confirming popup
type -> callable, default -> () => null
Values: callback function
See examples for more details
onConfirm(): calls after popup closed (both outside-click and escape-key are included)
type -> callable, default -> () => null
Values: callback function
See examples for more details
onConfirm(): calls after popup cancelled
type -> callable, default -> () => null
Values: callback function
See examples for more details
onOpen(): calls after popup opened
type -> callable, default -> () => null
Values: callback function
See examples for more details
onForm(): calls on form submit
type -> callable, default -> () => null
Values: callback function
See examples for more details
onDelete(): calls before destroying popup
type -> callable, default -> () => null
Values: callback function
See examples for more details
Popup examples
Popup with close button
Hello.fire({
title: "Delete",
text: "Are you sure about deleting these files?",
confirmButton: "Yes",
cancelButton: "No"
});Popup with icon
Hello.fire({
title: "Note",
text: "jQuery is required for this module!",
icon: "info"
});Popup with modern theme
Hello.fire({
title: "Success",
text: "Your account information updated successfully.",
icon: "success",
theme: "modern"
});Popup with callback actions
Hello.fire({
title: "Delete",
text: "Are you sure about deleting these files?",
confirmButton: "Yes",
cancelButton: "No",
onConfirm: () => {
Hello.fire({
title: "Delete",
text: "Your file has been deleted successfully",
icon: "success"
});
}
});Timer popup
Hello.fire({
title: "Please wait",
text: "Please wait while we are looking at you 😃",
confirmButton: false,
timeout: 5000,
showLoader: true,
allowOutsideClick: false,
allowEscapeKey: false
});Popup with AJAX request
let image_url = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
function ping_image(url, onload, onerror) {
let img = new Image(), time = new Date().getTime();
img.onload = () => onload(img, time)
img.onerror = () => onerror("Cannot load image");
img.src = url;
}
Hello.fire({
title: "Loading image",
text: "Please wait...",
confirmButton: false,
showLoader: true,
onBuild: () => {
ping_image(image_url, (img, t) => {
let ping = new Date().getTime() - t;
Hello.fire({
title: "Success",
text: `<div id="loaded-image"><p>Image has loaded in ${ping}ms</p></div>`,
icon: "success",
onBuild: () => $("#loaded-image").append(img).find("img").attr("style", "width:80px")
});
}, text => {
Hello.fire({
title: "An error has occurred",
text: text,
icon: "error"
});
});
}
});Popup with custom button
Hello.fire({
title: "Newsletter",
text: "Please subscribe to our newsletter",
confirmButton: "Join",
cancelButton: "No thanks",
buttons: [{
text: "Remind me later",
type: "primary",
attr: "data-newsletter-snooze"
}],
onConfirm: () => {
Hello.fire({
title: "Newsletter",
text: "Thanks for joining our newsletter 😇"
});
},
onBuild: () => {
$("[data-newsletter-snooze]").click(function(){
Hello.fire({
title: "Newsletter",
text: "We'll remind you to join us later 😊"
});
});
}
});Popup with login form
Hello.fire({
title: "Login",
text: `
<form id="login-form">
<div class="hello-input-group">
<input type="text" name="username" placeholder="">
<span>Username</span>
<i class="icon bi bi-person"></i>
</div>
<div class="hello-input-group">
<input type="password" name="password" placeholder="">
<span>Password</span>
<i class="icon bi bi-asterisk"></i>
</div>
<button type="submit" class="btn">Login</button>
</form>
`,
confirmButton: false,
forms: {
"login-form": (data, setter) => {
let {username, password} = data;
if(!username.value){
return {
success: false,
text: "Please enter a valid username"
}
}
if(password.value.length < 8){
return {
success: false,
text: "Password must be at least 8 characters"
}
}
Hello.fire({
title: `Welcome ${username.value}`,
text: `${password.value} is not very strong password by the way 😌`
});
}
}
});Popup builder
let popup = new Hello({
title: "Hello pop",
text: "Are you enjoy using it?",
confirmButton: "Yes",
cancelButton: "No"
});
setTimeout(() => {
// Display the alert somewhere else
popup.build().pop();
}, 2000);Popup queue
Hello.queue({
title: "Popup #1",
text: "This is the first popup in the queue",
confirmButton: false,
timeout: 2000,
showLoader: true
});
Hello.queue({
title: "Popup #2",
text: "This is the second popup",
confirmButton: "Close me"
});
Hello.queue({
title: "Popup #3",
text: "And it goes on...",
confirmButton: false,
timeout: 2000,
showLoader: true
});Toast box examples
Auto-close toast
Hello.fire({
text: "Hey there 👋",
type: "toast",
position: "mm", // Middle Middle
timeout: 3000 // 3 seconds
});Permanent toast
Hello.fire({
text: "Click on 'Close all' button",
type: "toast",
position: "mm"
});Toast queue
Hello.queue({
text: "Files uploaded successfully",
type: "toast",
position: "mm",
timeout: 2000
});
Hello.queue({
text: "Updating account information...",
type: "toast",
position: "mm",
timeout: 3000
});
Hello.queue({
text: "Account information updated",
type: "toast",
position: "mm",
timeout: 2000
});Other examples
Close all or the last one in the queue
Hello.closeAll();Close all and clear queue
Hello.clearQueue();Make toast in a single line!
Hello.makeToast(text, timeout);