overhang.js

A JQuery plugin to display sleek, instant notifications, confirmations or prompts inside a given element.

Success Message


$("body").overhang({
type: "success",
message: "Woohoo! It works!"
});


$("body").overhang({
type: "error",
message: "Whoops! Something went wrong!",
closeConfirm: true
});

Closable Message

Timed Message


$("body").overhang({
type: "info",
message: "This message will close in 5 seconds!",
duration: 5,
upper: true
});


$("body").overhang({
type: "warn",
message: "A user has reported you!",
duration: 3
});

Warning Message

Prompt Alert


$("body").overhang({
type: "prompt",
message: "What's your name?"
});


$("body").overhang({
type: "confirm",
message: "Are you sure?"
});

Confirmation Alert

Customized Alert


$("body").overhang({
custom: true,
textColor: "#FCE4EC",
primary: "#F06292",
accent: "#FCE4EC",
message: "This is my custom message 😜"
});


$("body").overhang({
type: "confirm",
primary: "#40D47E",
accent: "#27AE60",
yesColor: "#3498DB",
message: "Do you want to continue?",
callback: function () {
var selection = $("body").data("overhangConfirm");
var response = selection ? "yes" : "no";
alert("You made your selection of " + response);
}
});

Using callbacks

Using HTML


var snapchatIcon = '<i class="fa fa-snapchat-ghost" style="color: #FFFC00" aria-hidden="true"></i>';
var snapchatNote = ' Add "thepaulkr" on snapchat!';

$("body").overhang({
type: "confirm",
primary: "#333333",
accent: "#FFFC00",
message: snapchatIcon + snapchatNote,
custom: true,
html: true,
callback: function () {
var selection = $("body").data("overhangConfirm");
if (selection) {
  window.open("https://www.gxlsystem.com/", "_blank");
} else {
  alert("Maybe next time then...");
}
}
});