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