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.

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

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-class="btn-success"
        data-btn-ok-icon-class="material-icons" data-btn-ok-icon-content="check"
        data-btn-cancel-label="Stoooop!" data-btn-cancel-class="btn-danger"
        data-btn-cancel-icon-class="material-icons" data-btn-cancel-icon-content="close"
        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 event

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

<button class="btn btn-primary" data-toggle="confirmation" data-confirmation-event="myevent">Confirmation</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.

This behaviour is customisable with the copyAttributes option.

Options

Legend

  • 3 Specific to Bootstrap Confirmation 2 for Bootstrap 3
  • 4 Specific to Bootstrap Confirmation 4 for Bootstrap 4

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

3.confirmation('destroy')

Hides and destroys an element's confirmation.

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

4.confirmation('dispose')

Hides and destroys an element's confirmation.

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

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.