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!

AttachmentSize
jquery.confirm-1.2.js3.45 KB

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Question about the jQuery Confirm Plugin

If you attach the confirm plugin to a regular a link, which has the link in the traditional way (in the HTML rather than attached via a jQuery function), can you make sure that link is followed if you click yes on your inline confirm message? It looks like both the yes and no have the "wrapper" default value on them, which means the original link is never followed, and as the original link target link is provided in the HTML, rather than via jquery, I don't see how this will work. I don't want to attach any link targets via jquery, as they are dynamically generated on the page.

Re: Question about the jQuery Confirm Plugin

Can't you just attach a click handler to the links? This can be done in a single line in jQuery.

$('a.example').click(function(event) {
    location.href = $(this).attr('href');
}).confirm();

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.