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.



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>

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>


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

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>


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>


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


Enable confirmations via JavaScript:

  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 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.
btnOkLabel string 'Yes' Label of the "Ok" button.
btnOkClass string 'btn-primary' Class of the "Ok" button.
btnOkIconClass string Icon class of the "Ok" button.
btnOkIconContent string Icon content of the "Ok" button.
btnCancelLabel string 'No' Label of the "Cancel" button.
btnCancelClass string 'btn-default' Class of the "Cancel" button.
btnCancelIconClass string Icon class of the "Cancel" button.
btnCancelIconContent 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.

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.
value * Custom value that will be passed to the callbacks and events.
class string 'btn btn-xs btn-default' Class of the button.
iconClass string Icon class of the button.
iconContent 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



Reveals an elements confirmation.



Hides an elements confirmation.



Toggles an elements confirmation.



Hides and destroys an element's confirmation.



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.