Apprise v2

The, new and improved, attractive alert alternative for jQuery

The initial release of Apprise was a great success, but version 2 will blow your socks off. Every aspect has been rebuilt from the ground up, making it much more attractive and nimble.

December 7th, 2012 by Daniel Raftery

Fork on Github

The initial release of Apprise has been a major success and is often what this site is most commonly associated with. As far as I've been able to track, Apprise has been downloaded over 23,000 times and has been mentioned in over 46,000 blogs. Which is fantastic, especially for something that I've never been very proud of. I've wanted to update, and change the UI, of this for over a year now. Time has finally permitted and it's, finally, ready.

Demos

Let's get right down to business.

Pretty slick, right? That's the basic functionality with the default settings. Also, by default, you will be prompted if you try to navigate away while an Apprise is open. This gives it a little more of a native prompt's functionality (forcing the user to interact).

Let's take a peak at the default settings before we change the options around a bit.

var settings = {
	animation: 700,	// Animation speed
	buttons: {
		confirm: {
			action: function() { $me.dissapear(); }, // Callback function
			className: null, // Custom class name(s)
			id: 'confirm', // Element ID
			text: 'Ok', // Button text
		}
	},
	input: false, // input dialog
	override: true, // Override browser navigation while Apprise is visible
};

You'll notice that the buttons are completely customizable and can easily be altered using your own CSS rules. The override property is what keeps the browser from navigating away from the page while an Apprise is open. Changing this to false will disable that functionality. Apprise will display anything you pass to it, including html, but I did want to keep a sort of native feel to it. That's why you see the input dialog option. This is my way of being able to replicate the native prompt function.

Let's try another demo, but changing the settings around a bit.

var options = {
	buttons: {
		confirm: {
			text: 'Okie',
			className: 'blue',
			action: function(e) {
				$('#custom-response').html('You clicked the "Okie" button! You said: "' + e.input + '"');
				console.log(e);
				Apprise('close');
			}
		},
	},
	input: true,
};

Apprise('hi', options);

We're going to use a custom CSS class on our confirm button. Then, on click, we're going to log some information to the console and finally send the close command to Apprise. If you override the standard settings to use custom buttons, you'll need to make sure you send in the close command at some point. Apprise won't automatically close on button press.

You'll see the custom blue button with it's custom text, as well as a goofy little callback function that populates the field below:

Response: 

Using

I think the most difficult part of using Apprise v2 will be extending your own custom settings, and that's pretty easy. Probably, the easiest way to go about things, would be to copy and paste the default settings, adjusting them to your liking before passing them into your Apprise function call.

Apprise v2 does still depend on jQuery (1.7 or higher) so you'll want to make sure you include both source files in your document. Also, don't forget the lovely stylesheet that enables the sexy design aspects that make your users all warm and fuzzy inside.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="apprise-v2.js"></script>
<link rel="stylesheet" href="apprise-v2.css" type="text/css">