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...");
    }
  }
});
Fork me on GitHub