--- layout: default title: Home description: Bootstrap plugin for on-place confirm boxes using Popover isHome: true ---

Let's face it: Confirmation dialog boxes are annoying !

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.

Installation

Dependencies

The plugin uses the default Popover styling Bootstrap provides.

Let's go!

Include bootstrap-confirmation.js in your page after the dependencies.

{% highlight html %} {% endhighlight %}

Examples

Basic demo

Add small overlays with "Yes" and "No" buttons, like those on the iPad, to any element. Click the button to trigger the confirmation.

{% highlight html %} {% endhighlight %}

Confirmation also works natively with links.

Confirmation
{% highlight html %} Confirmation {% endhighlight %}

Personalization

Has personalized description, labels, icons and colors.

{% highlight html %} {% endhighlight %}

Four directions

{% highlight html %} {% endhighlight %}

Singleton

Only one boxe visible at once.

{% highlight html %} {% endhighlight %}

Popout

Click anywhere on the page to close all boxes.

{% highlight html %} {% endhighlight %}

Custom event

When the "Yes" button is clicked, the main button receives a myevent event instead of click.

{% highlight html %} {% endhighlight %}

Custom buttons

Completely overwrite the default positive/negative buttons with the buttons of your choice.

{% highlight html %} {% endhighlight %}

Usage

Enable confirmations via JavaScript:

{% highlight javascript %}$('[data-toggle=confirmation]').confirmation({ rootSelector: '[data-toggle=confirmation]', // other options });{% endhighlight %}

Declaration order

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.

About links

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

Legend

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.

Custom buttons

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.
{% highlight javascript %} { onConfirm: function(value) { alert('You choosed ' + value); }, onCancel: function() { alert('You didn\'t choose anything'); }, buttons: [ { class: 'btn btn-sm btn-danger', iconClass: 'material-icons mr-1', iconContent: 'directions_railway', label: 'Railway', value: 'Railway' }, { class: 'btn btn-sm btn-primary', iconClass: 'material-icons mr-1', iconContent: 'directions_car', label: 'Car', value: 'Car' }, { class: 'btn btn-sm btn-warning', iconClass: 'material-icons mr-1', iconContent: 'directions_boat', label: 'Boat', value: 'Boat' }, { class: 'btn btn-sm btn-secondary', iconClass: 'material-icons mr-1', iconContent: 'cancel', label: 'Cancel', cancel: true } ] } {% endhighlight %}

Methods

.confirmation('show')

Reveals an elements confirmation.

{% highlight javascript %}$('#element').confirmation('show');{% endhighlight %}

.confirmation('hide')

Hides an elements confirmation.

{% highlight javascript %}$('#element').confirmation('hide');{% endhighlight %}

.confirmation('toggle')

Toggles an elements confirmation.

{% highlight javascript %}$('#element').confirmation('toggle');{% endhighlight %}

3.confirmation('destroy')

Hides and destroys an element's confirmation.

{% highlight javascript %}$('#element').confirmation('destroy');{% endhighlight %}

4.confirmation('dispose')

Hides and destroys an element's confirmation.

{% highlight javascript %}$('#element').confirmation('dispose');{% endhighlight %}

Events

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.