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!
| Attachment | Size |
|---|---|
| jquery.confirm-1.1.js | 3.38 KB |


Comments
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.
Post new comment