iosOverlay.js — iOS-style overlays/notifications for the web

Examples

The following all have a two second duration:

It's possible to update a notification when it's already been added:

Parameters and Defaults

Parameter	Default Value	Accepts Type
`onbeforeshow`	`noop();`	Function
`onshow`	`noop();`	Function
`onbeforehide`	`noop();`	Function
`onhide`	`noop();`	Function
`text`	null	String
`icon`	null	String (file path)
`spinner`	null	Spinner (via Spin.js)
`duration`	null	Number (ms)

Methods

Method Description/Use

Method	Description/Use
`hide`	Call this to begin the hide animation. // notification is called var notification = ...; // something happens // fade out notification and destroy on complete notification.hide();
`update`	Used to update the contents of a notification on the fly. Accepts `text` and `icon` in formats as table above denotes. Accepts one or both. // notification is called var notification = ...; // something happens // notification is updated notification.update({ text: "Success!", icon: "img/smiley.png" });

hide

Call this to begin the hide animation.

  // notification is called
  var notification = ...;

  // something happens

  // fade out notification and destroy on complete
  notification.hide();

update

Used to update the contents of a notification on the fly. Accepts text and icon in formats as table above denotes. Accepts one or both.

  // notification is called
  var notification = ...;

  // something happens

  // notification is updated
  notification.update({
    text: "Success!",
    icon: "img/smiley.png"
  });

Browser Support

IE7+ — Rounded corners/animation do degrade when not supported, see optional dependencies
Google Chrome
Firefox
Opera
Desktop Safari
Mobile Safari — iPhone & iPad

Optional Dependencies

Spin.js — Required if you want to use a spinner object.
jQuery — Required for a fallback CSS animation support.

Tips & Tricks

To prevent icon flickers as they load, preload image resources.
Keep text messages short and succinct.
You might also like these iOS 3D dropdown notifications: