Bootstrap Confirmation
Bootstrap plugin for on-place confirm boxes using Popover
Currently v2.4.4/4.1.0
Bootstrap plugin for on-place confirm boxes using Popover
Currently v2.4.4/4.1.0
ethaizone :
This is my primary reason I wrote this plugin. I wanted a simple box to confirm a task. Instead of using rude boxes that interrupt a user's workflow, let's use a popover instead.
The plugin uses the default Popover styling Bootstrap provides.
Include bootstrap-confirmation.js in your page after the dependencies.
Add small overlays with "Yes" and "No" buttons, like those on the iPad, to any element. Click the button to trigger the confirmation.
Confirmation also works natively with links.
Has personalized description, labels, icons and colors.
Only one boxe visible at once.
Click anywhere on the page to close all boxes.
When the "Yes" button is clicked, the main button receives a myevent
event instead of click
.
Completely overwrite the default positive/negative buttons with the buttons of your choice.
Enable confirmations via JavaScript:
Confirmation tries to cancel the default event of the target and trigger it when the "Ok" button is clicked.
However, in order to have the good behavior, the plugin must be initialized before manually attaching event
listener (with $.on()
).
If this is not possible, you could listen the confirmed.bs.confirmation
or use the
onConfirm
callback.
If Confirmation is attached to a <a>
tag, the href
attribute will be removed and
moved to the "Ok" button.
This behaviour is customisable with the copyAttributes
option.
Options can be passed via data attributes or JavaScript plain object. For data attributes, append the option name
to data-
, as in data-btn-ok-class=""
.
All options from Bootstrap Popover can be used, see Bootstrap 4 Popover and Bootstrap 3 Popover.
Name | type | default | description |
---|---|---|---|
title | string | function | 'Are you sure?' | default content value if title attribute isn't present. |
placement | string | function | 'top' | See Popover documentation |
html | boolean | true | See Popover documentation |
singleton | boolean | false | Set true to allow only one confirmation to show at a time.When the newest confirmation element is clicked, the older ones will disappear. |
popout | boolean | false | Set true to hide the confirmation when user clicks outside of it.This will affect all confirmations that use same selector. |
rootSelector | string | Required for jQuery >= 3 when using singleton or popout. The selector on which Confirmation is applied. This must be the same selector as provided to $() .
|
|
copyAttributes | string | 'href target' | List of attributes that will be copied from the main element to the Confirm button. |
confirmationEvent | string | =trigger 'click' by default |
Event which will be triggered when the "Ok" button is clicked. |
btnOkLabel | string | 'Yes' | Label of the "Ok" button. |
btnOkClass | string |
3'btn btn-xs btn-primary' 4'btn btn-sm btn-primary' |
Class of the "Ok" button. |
3btnOkIcon | string | Icon class of the "Ok" button. | |
4btnOkIconClass | string | Icon class of the "Ok" button. | |
4btnOkIconContent | string | Icon content of the "Ok" button. | |
btnCancelLabel | string | 'No' | Label of the "Cancel" button. |
btnCancelClass | string |
3'btn btn-xs btn-default' 4'btn btn-sm btn-secondary' |
Class of the "Cancel" button. |
3btnCancelIcon | string | Icon class of the "Cancel" button. | |
4btnCancelIconClass | string | Icon class of the "Cancel" button. | |
4btnCancelIconContent | string | Icon content of the "Cancel" button. | |
onConfirm | function | $.noop | Callback called when the "Ok" button is clicked. Not compatible with the data- API.
|
onCancel | function | $.noop | Callback called when the "Cancel" button is clicked. Not compatible with the data- API.
|
buttons | object[] | Configuration of custom buttons. Not compatible with the data- API.
|
If the default positive/negative buttons are not enough you can use the buttons
configuration to
overwrite them. It is an array of object as detailled bellow. If buttons
is provided, other btnOk*
and btnCancel*
parameters will be ignored.
When a custom button is clicked the onConfirm
callback is called and the confirmed.bs.confirmation
event is fired, unless you set cancel = true
, in this case the onCancel
callback is called
and the canceled.bs.confirmation
event is fired.
Attribute | type | default | description |
---|---|---|---|
label | string | Label of the button. | |
value | * | Custom value that will be passed to the callbacks and events. | |
class | string |
3'btn btn-xs btn-default' 4'btn btn-sm btn-secondary' |
Class of the button. |
3icon | string | Icon class of the button. | |
4iconClass | string | Icon class of the button. | |
4iconContent | string | Icon content of the button. | |
attr | object <string, *> | Hashmap of attributes to add to the button, applied with $.attr . |
|
onClick | function | Callback called when the button is clicked. | |
cancel | boolean | false | If it is a cancellation button. |
Reveals an elements confirmation.
Hides an elements confirmation.
Toggles an elements confirmation.
Hides and destroys an element's confirmation.
Hides and destroys an element's confirmation.
All events from Bootstrap Popover are available but suffixed with bs.confirmation
.
Additionnally the following events are available:
Event Type | Description |
---|---|
confirmed.bs.confirmation | This event is fired when the "Ok" button is clicked. |
canceled.bs.confirmation | This event is fired when the "Cancel" button is clicked. |