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("/", "_blank");} else {  alert("Maybe next time then...");}}});