Confirmation

This is an extension of the tooltip plugin, which allow to use it as an unobtrusive confirmation pop-up.

Since version 1.4, the main method was moved from $.confirm to $.fn.confirm, but the old names and syntax where kept to allow older code to work.

How to use it

Just add the class confirm to any element (for instance, link or submit button) to trigger the plugin:

Do some action

<a href="link.html" class="confirm">Do some action</a>

If the user confirms the action, the default action of the element will be triggerred, otherwise it will be prevented.

Extend plugin

Out of the box, the plugin supports two type of elements: links and submit buttons. If you want to define a custom behavior for another type of elements or for a class, you may extend the plugin's actions setting. For instance, if you want an element with the class confirm-alert to open a modal when confirmed, you can do it this way:

$.extend($.fn.confirm.defaults.actions, {

	'.confirm-alert': function(target)
	{
		$.modal.alert('Some message here');
	}

});

You can add as many custom actions as needed: the key should be a jQuery/CSS selector, and the value a function with one parameter: the clicked element.

Note that actions will be parsed in the order in which they are defined, and once a match is found, the script stops. So if in the previous example you want to use the class confirm-alert on a link, this won't work because the action for links is defined before the one for this class. If you want your custom action to be parsed before the default ones, use this declaration:

$.fn.confirm.defaults.actions = $.extend({

	'.confirm-alert': function(target)
	{
		$.modal.alert('Some message here');
	}

}, $.fn.confirm.defaults.actions);

Manual trigger

As of version 1.4, you may now open the confirmation dialog using a simple script:

$(selector).confirm();

Older syntax and options are still supported

Note that if you use a click event to open the confirmation bubble, you may need to prevent the default behavior, other wise the bubble will close as soon as it opens:

$('#button').click(function(event)
{
	event.preventDefault();
	$(selector).confirm();
});

In some cases, you may even need to call event.stopPropagation() too.

Of course, you may pass an option object with all desired settings (see reference below):

$(selector).confirm({
	message:	'Are you really really sure?',
	onConfirm:	function()
	{
		/* Custom code here */

		// Return false to prevent default action
		return false;
	}
});

Options reference

The defaults may be modified at runtime in $.fn.confirm.defaults, and options may be passed inline using the data-confirm-options attribute

message

Default message
Type: string
Default: 'Are you sure?'

confirmText

Text of confirm button
Type: string
Default: 'Confirm'

confirmClasses

Classes of confirm button
Type: string
Default: ['blue-gradient', 'glossy']

cancel

Display cancel button?
Type: boolean
Default: true

cancelText

Text of cancel button
Type: string
Default: 'Cancel'

cancelClasses

Classes of cancel button
Type: string
Default: []

cancelFirst

Display cancel button before confirm
Type: boolean
Default: true

tooltip

Use tooltip (true) or confirm (false)
Type: boolean
Default: true

tooltipOptions

Tooltip options
Type: object
Default: {}

remind

Confirm once or every time?
Type: boolean
Default: false

actions

Default actions depending on node type
This list can be extended with further selectors and functions: $.extend($.fn.confirm.defaults.actions, { selector: function(target) { ... } })
Type: object
Default: {
    
    // Links
    'a': function(target)
    {
        document.location.href = target[0].href;
    },
    
    // Submit buttons
    '[type="submit"]': function()
    {
        target.closest('form').submit();
    }
    
}

onShow

Callback when message is shown: function(modalOrTooltip)
Scope: the target element
Type: function
Default: null

onConfirm

Callback when confirm
Note: the function may return false to prevent the target's default action (ie: opening a link)
Scope: the target element
Type: function
Default: null

onCancel

Callback when cancel (no called if cancel button is disabled)
Scope: the target element
Type: function
Default: null

onRemove

Callback when message is removed (with or without active confirmation)
Scope: the tooltip/modal
Type: function
Default: null

onAbort

Callback when the user closes the confirmation without make a choice (for instance, click outside the tooltip)
Scope: the target element
Type: function
Default: null