jQuery Confirm Plugin

This plugin displays a confirmation message in place before doing an action. It does not require adding any extra code apart from a call to the plugin itself. One call to $(element).confirm() will do the magic. Also, this plugin doesn’t require you to provide a callback function; it figures it out on its own.
You can check the examples for more info.

How does it work?

To put it simply, it saves a copy of all event handlers bound to the element, unbinds them and binds itself instead. A confirmation dialog is displayed when the user triggers the action. If the user chooses to proceed with the action, it rebinds the handlers again and triggers the event. If the user chooses to cancel the action, the dialog disappears.

Docs

$(element).confirm(options)
options
Name Type Optional Description Default Value
msg String Optional Confirmation message ‘Are you sure?’
stopAfter string Optional Determines when the confirmation dialog will stop being promoted.
Possible values (‘never’, ‘ok’, ‘cancel’, ‘once’)
‘never’
wrapper String Optional Dialog wrapper ‘<span></span>’
eventType String Optional The event that triggers the confirmation ‘click’
dialogShow String Optional Dialog displaying effect ‘show’
dialogSpeed String Optional Dialog displaying speed ‘fast’
timeout Integer Optional Time in milliseconds to hide the confirmation dialog 0
options.buttons
ok String Optional Ok caption ‘Yes’
cancel String Optional Cancel caption ‘No’
wrapper String Optional Button wrapper ‘<a href=”#”></a>’
separator String Optional Separator between buttons ‘/’
cls String Optional Button class undefined

Examples

First Example

// The action.
$('a').click(function() {
  alert('click');
  return false;
});

// The most simple use.
$('a').confirm();

click me!

Second Example

// The action.
$('input[type=button]').click(function() {
  $(this).remove();
});

$('input[type=button]').confirm({
  msg:'Do you really want to delete this button?',
  timeout:3000
});

Third Example

// The action.
$('span').mouseover(function() {
  $(this).html('Here is the offer');
});

$('span').confirm({
  msg:'See my interesting offer?',
  stopAfter:'ok',
  eventType:'mouseover',
  timeout:3000,
  buttons: {
    ok:'Sure',
    cancel:'No thanks',
    separator:'  '
  }
});

confirmation on mouseover.

Fourth Example

$('a').confirm({
  timeout:3000,
  dialogShow:'fadeIn',
  dialogSpeed:'slow',
  buttons: {
    wrapper:'<button></button>',
    separator:'  '
  }  
});

click me!

Posted on September 21, 2007 in JavaScript
Tags:
»

SEO Services provided by SEOExplode.com