A JQuery plugin to display sleek, instant notifications, confirmations or prompts inside a given element.
Success Message
$("body").overhang({
type: "success",
message: "Woohoo! Our message works!"
});
$("body").overhang({
type: "error",
message: "Whoops! Something went wrong!",
closeConfirm: true
});
Closable Message
Timed Message
$("body").overhang({
type: "info",
message: "⏲️ I will close in 5 seconds!",
duration: 5,
upper: true
});
$("body").overhang({
type: "warn",
message: "A user has reported you!",
duration: 3,
overlay: true
});
Dim Overlay Screen
Prompt Alert
$("body").overhang({
type: "prompt",
message: "What's your name?",
overlay: true
});
$("body").overhang({
type: "confirm",
message: "Are you sure?",
overlay: true
});
Confirmation Alert
Customized Alert
$("body").overhang({
custom: true,
textColor: "#2D3436",
primary: "#F06292",
accent: "#FF7675",
message: "This is my custom message 😜",
closeConfirm: true,
customClasses: "overhang-overrides"
});
$("body").overhang({
type: "confirm",
primary: "#40D47E",
accent: "#27AE60",
yesColor: "#3498DB",
message: "Do you want to continue?",
overlay: true,
callback: function (value) {
var response = value ? "Yes" : "No";
alert("You made your selection of: " + response);
}
});
Using callbacks
Using HTML
var instagramIcon = '<i class="fa fa-instagram" style="color: #FFFC00" aria-hidden="true"></i>';
var instagramNote = ' Add National Geographic on instagram!';
$("body").overhang({
type: "confirm",
primary: "#9b59b6",
accent: "#8e44ad",
message: instagramIcon + instagramNote,
custom: true,
html: true,
overlay: true,
overlayColor: "#1abc9c",
callback: function (value) {
if (value) {
window.location.href = "https://www.instagram.com/natgeo/";
} else {
alert("Maybe next time then...");
}
}
});