반응형

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

http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/

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.

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

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.
반응형

+ Recent posts