jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)

Overview

This jQuery plugin aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions. What’s the benefit of using custom methods? Well, a few good reasons, really.

Usage
Compatibility
Demo
Download
Known Issues
Licensing

These are completely customizable via CSS (which can make your apps look much more professional)
You can set a custom title for each dialog
IE7 users get an ugly warning and usually have to reload the page if you use a regular prompt()

These methods simulate a true modal dialog box. They will automatically re-position themselves if you resize the browser window (unlike many existing dialog/lightbox-style plugins). If you include the jQuery UI Draggable plugin, the dialogs can be moved by dragging their title bars. Everything you need to produce the dialogs in the demonstration is included in the download.

Requires jQuery 1.2.6 or above.

Implementation

Include the following in the <head> section of your HTML document(s):

<!-- Dependencies -->
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Make sure you update the path to the respective files. If you are already using the jQuery UI Draggable plugin (including the UI core), simply omit the link to jquery.ui.draggable.js.

For IE to display the dialogs properly, you’ll also need to make sure that you’re using Standards Mode. Just add the appropriate DTD at the very top of your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Usage

This plugin utilizes the $.alerts namespace, but there are three built-in shortcut functions that make implementation easier:

jAlert(message, [title, callback])
jConfirm(message, [title, callback])
jPrompt(message, [value, title, callback])

Unlike their native JavaScript counterparts, you can use HTML in the message parameter. To specify a newline, you can use either \n or <br />.

These methods do not return the same values as confirm() and prompt(). You must access the resulting values using a callback function. (See the demo for more details.)

Compatibility

This plugin requires jQuery 1.2.6 or above and has been tested to work in the following browsers:

Internet Explorer 6 & 7
Firefox 2 & 3
Safari 3
Chrome
Opera 9

Demo

Visit the live demonstration page to see examples of each dialog.

Download

Current version: jQuery Alert Dialogs – Version 1.1

This plugin is provided to you as-is, at absolutely no cost. If you would like to support its development, feel free to contribute any amount you prefer via PayPal. As always, you are welcome to contribute code for bug fixes and feature enhancements as well. Either way, thanks for supporting our efforts!

Known Issues

ENTER and ESC keys (to accept/cancel) don’t work in WebKit browsers
The draggable plugin doesn’t currently work in Opera
IE6 acts a bit differently as position: fixed isn’t supported.

A Beautiful Site, LLC.