Minimal jQuery Alert and Confirm Replacements

I recently made the decision to stop using modal dialogs in my apps. What once was a good way to obtain information or confirmation has become undesirable and taboo in the world of UX.

However, sometimes a simple window.alert() or window.confirm() is necessary, particularly to confirm some kind of irreversible operation. But the default system alert and confirm methods block script execution and aren't very pretty.

So here's a 150 line jQuery plugin that provides a minimal yet highly customizable replacement for window.alert() and window.confirm().

Features

• Simple syntax.
• Minimal default styles; easy to customize or write your own.
• Show/hide hooks for adding custom animation (works well with Velocity.js).
• Prevents focus from leaving the modal.
• Returns promise-compatible (jQuery deferred) for ok/cancel actions.
• Compact! (about 150 lines)

Best of all, you can easily customize them to match your app perfectly. And the show/hide hooks play nice with $.animate, $.velocity, or whatever animation library you prefer to use.

Example

// Alert
$.alertable.alert('Howdy!');

// Confirmation
$.alertable.confirm('You sure?').then(function() {
    // They clicked ok!
});

Demo

Installing with NPM

npm install --save @claviska/jquery-alertable

Docs / Downloading / Contributing

You can read the docs, download the latest source or contribute to this project on GitHub. Please submit bugs to the issue tracker and implementations questions to StackOverflow. 

This plugin is licensed under the MIT license.

This looks familiar

Many years ago I wrote a similar plugin like this, but it was more bloated and came with some crazy 2000-ish styles. That version has been archived for a few years now, but you can find it here for historical reference.