Bootstrap Confirmation

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.

Dependencies

jQuery
Popper.js (for Bootstrap 4)
Bootstrap 4 or Bootstrap 3

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>

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>

On a link

Confirmation also works natively with links.

Confirmation

<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 -->

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

{
  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
    }
  ]
}

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.

Bootstrap Confirmation

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

Installation

Dependencies

Let's go!

Examples

Basic demo

On a link

Personalization

Four directions

Singleton

Popout

Custom event

Custom buttons

Usage

Declaration order

About links

Options

Legend

Custom buttons

Methods

.confirmation('show')

.confirmation('hide')

.confirmation('toggle')

3.confirmation('destroy')

4.confirmation('dispose')

Events