Cory S.N. LaViska (creator of one of my favorite jQuery Plugins – contextMenu.js) released version 1.0 of jQuery Alert Dialogs a few days ago. It looked interesting and worth some investigation. To test things out I decided to try and recreate the dialogs from one of my earlier posts ASP.NET Popup Message Box User Control which was originally based off a post by Janko.

Cory’s new plugin “aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions.” I believe he achieved this in a good looking manner that is straightforward and simple to implement. The title and message of the dialog can be set before they are called. The dialog is also draggable when the jquery ui draggable plugin is included. Finally, the dialogs are dismissed in most browsers when the enter or esc key is pressed.

I really wanted to have the four types of alerts from my earlier post though (warning, error, success and info) since I use them all the time. It was pretty easy to tweak Cory’s CSS  and the plugin to pass in the type of alert I wanted. You will find my modified version of the plugin in the download.

Live Demo | Download (HTML, CSS and jQuery)

Screenshot of End Product:

To call Cory’s version of the alert dialog the following is used jAlert('This is a custom alert box', 'Alert Dialog'); where the first parameter is the message and the second is the title. In my version jAlert('error', 'This is the error dialog box with some extra text.', 'Error Dialog'); I just pass in the type of alert I want (error, warning, success or info) as the first parameter and then the message and title.

In an upcoming post I will show you an easy way to set these dialogs up to fire after a postback and probably how to use them with Cory’s contextMenu.js plugin.

For more details on the jQuery Alert Dialog plugin, be sure to see Cory’s website. Also be sure to checkout the demo and download.