jqAlert - javascript alerts for use with jQuery UI

The following is a very basic demonstration of how to display an alert.

However, in most cases you are probably going to want more interaction with the dialog that is displayed to your users. With each of the dialogs you get access to the following common properties.

title: Defines the title displayed on the dialogs title bar.
icon: Defines the icon displayed with the message. Short-hand version of the jQuery glyphs (subtract ui-icon-).
customIcon: Property that allows you to define a custom icon created in your CSS. The icon will have to be url encoded as a class in CSS.
show: The property that allows you to define the animation for how the dialog is displayed.
hide: The property that allows you to define the animation for how the dialog is closed.
timer: Define a timeout for how long the dialog will be displayed. Supplying a value of -1 will disable the timer.
allowEscape: Property that allows you to set whether a dialog can be closed by hitting the escape key or not.

There is also a common property for the buttons that gets displayed with your dialog.

buttons: The property that defines the array of buttons to be displayed with the dialog.

Button properties can include the following:

title: The property that defines the title text displayed on the button face.
callback: A function property to be used as a callback for when the button is pressed.
css: This property allows you to associate a custom css class to button.

Finally you have the following callback notifications for dealing with a dialog:

onTimeout: In the event that a timer value was given this callback is used to notify that the timeout has been reached.
onClose: A callback notification that when supplied will notify when the dialog has been closed.

It sounds like a lot for a simple dialog but the goal is to serve those that want it all at times. However, strides have been made to still keep it fairly simple.

So bringing it all together we can create something like the following:

Aside from the default properties alert dialogs can be loaded with the following:

You can read the History section for details as to where these properties came from.

exception: The property that defines the name or type of exception message.
stack: The property that defines the stack for the associated exception message.

If no buttons are supplied the alert dialog displays the following by default:

Ok: Ok button for user input.

Example:

Taking it even further we can do the following which uses most of the properties available to an alert dialog.

The confirmation dialog supports all of the common properties and if no buttons are supplied it displays the following:

Yes: Yes button for user input.
No: No button for user input.
Cancel: Cancel button for user input.

Example:

Let's take it even further and show how we can use all of the properties available.

Aside from the default properties prompt dialogs can also be configured with the following:

defaultResult: The property that defines the default message a user can supply.

If no buttons are supplied the alert dialog displays the following by default:

Ok: Ok button for user input.
Cancel: Cancel button for user input.

Example:

Let's take it even further and show how we can use all of the properties available.

The inform dialog supports all of the default properties and callback notifications. The only exception that the inform dialog has over the dialogs is that it does not support buttons.

Example

Documentation