In zymio and now in MusicHostr, I’ve developed a few solutions to simplify problems.  So I present to you my confirm and alert dialog solutions.  These extensions to jQuery UI are meant to simplify alerts and confirmation dialogs considerably.

Installation

1. Download jQuery UI 1.7.2.
2. Download dialogs.js.
3. Include the following code in the head of your HTML file(s):

<link rel="stylesheet" type="text/css" href="path/to/jquery-ui-1.7.custom.css" />
<script type="text/javascript" src="path/to/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="path/to/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="path/to/dialogs.js"></script>

Quick Alert

To quickly display an alert, all you need is:

$.alert({text: "This is an alert!"});

That’s it.  Quite easy, isn’t it?

Displaying a Confirm Dialog

A confirm dialog would take more code.  Here’s just a quick and dirty example of how code would be written for a confirm dialog:

$.confirm({
    text: "Click OK to release the hounds.",
    ontrue: function () {
        $.alert({text: "The hounds have been released."});
    }
});

Customizing Dialogs

There are numerous options for the dialogs.  So far you have seen text and ontrue.  However, this small script has been written for full customizability.

• title – The title of the dialog  (Defaults: “Confirm” for confirm and “Alert” for alert)
• text – The text within the body of the dialog  (Defaults: “Are you sure?” for confirm.)
• width – The width of the dialog.  (Default: 300)
• height - Height of the dialog.  (Default: 150)
• text_true – (confirm only) The text for the true button.  (Default: “OK”)
• text_false – (confirm only) The text for the false button. (Default: “Cancel”)
• button - (alert only) The text for the only button. (Default: “OK”)
• ontrue - (confirm only) Function callback for true.
• onfalse - (confirm only) Function callback for false
• onclose – Called after the dialog is closed