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 comfirm a task. Instead of using rude boxes that interrupt a user's workflow, let's use a popover instead.

Installation

CSS

The plugin uses the default popover styling Bootstrap provides.

JS Dependencies

Let's go!

Download bootstrap-confirmation.js and include it after jquery.js and bootstrap.js.

<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.js"></script>
<script src="path/to/bootstrap-confirmation.js"></script>

It is also available on Bower under the name bootstrap-confirmation2.

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.

<button class="btn btn-default" data-toggle="confirmation">Confirmation</button>

Confirmation also works natively with links.

<a class="btn btn-large btn-primary" data-toggle="confirmation" data-title="Open Google?"
   href="https://google.com" target="_blank">Confirmation</a>

Personalization

Has personalized description, labels, icons and colors.

<button class="btn btn-large btn-primary" data-toggle="confirmation"
        data-btn-ok-label="Continue" data-btn-ok-icon="glyphicon glyphicon-share-alt"
        data-btn-ok-class="btn-success"
        data-btn-cancel-label="Stoooop!" data-btn-cancel-icon="glyphicon glyphicon-ban-circle"
        data-btn-cancel-class="btn-danger"
        data-title="Is it ok?" data-content="This might be dangerous">
  Confirmation
</button>

Four directions

<button class="btn btn-default" data-toggle="confirmation" data-placement="left">Confirmation on left</button>
<button class="btn btn-default" data-toggle="confirmation" data-placement="top">Confirmation on top</button>
<button class="btn btn-default" data-toggle="confirmation" data-placement="bottom">Confirmation on bottom</button>
<button class="btn btn-default" data-toggle="confirmation" data-placement="right">Confirmation on right</button>

Singleton

Only one boxe visible at once.

<button class="btn btn-default" data-toggle="confirmation" data-singleton="true">Confirmation 1</button>
<button class="btn btn-default" data-toggle="confirmation" data-singleton="true">Confirmation 2</button>

Popout

Click anywhere on the page to close all boxes.

<button class="btn btn-default" data-toggle="confirmation" data-popout="true">Confirmation 1</button>
<button class="btn btn-default" data-toggle="confirmation" data-popout="true">Confirmation 2</button>

Custom buttons

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

<!-- Configured with JavaScript -->

Usage

Enable confirmations via JavaScript:

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

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.

Options

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 except trigger.

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.
btnOkClass string 'btn-xs btn-primary' Class of the "Ok" button.
btnOkIcon string 'glyphicon glyphicon-ok' Icon class of the "Ok" button.
btnOkLabel string 'Yes' Label of the "Ok" button.
btnCancelClass string 'btn-xs btn-default' Class of the "Cancel" button.
btnCancelIcon string 'glyphicon glyphicon-remove' Icon class of the "Cancel" button.
btnCancelLabel string 'No' Label of the "Cancel" button.
onConfirm function $.noop Callback called when the "Ok" button is clicked.
In data-on-confirm you can give the name of a function like myConfirm or myObject.confirm.
onCancel function $.noop Callback called when the "Cancel" button is clicked.
In data-on-cancel you can give the name of a function like myCancel or myObject.cancel.
buttons object[] Configuration of custom buttons.

Data attributes for individual popovers

Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

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.
class string 'btn btn-xs btn-default' Class of the button.
icon string Icon class 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.
{
  onConfirm: function() {
    alert('You choosed ' + currency);
  },
  onCancel: function() {
    alert('You didn\'t choose');
  },
  buttons: [
    {
      class: 'btn btn-danger',
      icon: 'glyphicon glyphicon-usd',
      onClick: function() {
        currency = 'US Dollar';
      }
    },
    {
      class: 'btn btn-primary',
      icon: 'glyphicon glyphicon-euro',
      onClick: function() {
        currency = 'Euro';
      }
    },
    {
      class: 'btn btn-warning',
      icon: 'glyphicon glyphicon-bitcoin',
      onClick: function() {
        currency = 'Bitcoin';
      }
    },
    {
      class: 'btn btn-default',
      icon: 'glyphicon glyphicon-remove',
      cancel: true
    }
  ]
}

Methods

.confirmation('show')

Reveals an elements confirmation.

$('#element').confirmation('show');

.confirmation('hide')

Hides an elements confirmation.

$('#element').confirmation('hide');

.confirmation('toggle')

Toggles an elements confirmation.

$('#element').confirmation('toggle');

.confirmation('destroy')

Hides and destroys an element's confirmation.

$('#element').confirmation('destroy');

Events

All events from Bootstrap Popover are available but suffixed with bs.confirmation.

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.