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

Your Ad Here

Overview

This jQuery plugin aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions. What is the benefit of using custom methods? Well, a few good reasons, really:
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 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.

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.)

Demo

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

Download

Download the current version of this plugin: Version 1.0
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!
 

Comments (0)

RSS Collapse / Expand

Only Registered and authorized users may post comments