Simple Confirmation Popover Plugin with jQuery and Bootstrap

This is a modified version of ethaizone's jQuery Bootstrap Confirmation plugin that enables you to display a confirmation popup next to the action button using Bootstrap 3 popover component.

How to use it:

1. Load the Bootstrap Confirmation 3 plugin in your web project which has Bootstrap 3 framework and jQuery JavaScript library installed.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
  ...
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.js"></script>
<script src="bootstrap-confirmation.min.js"></script>

2. Attach a confirmation popover to a given element using HTML5 data attribute.

<a href="#" class="btn btn-danger" data-toggle="confirmation">Click me</a>

$('body').confirmation({
  selector: '[data-toggle="confirmation"]'
});

3. Enable the plugin with callbacks on a given element via JavaScript.

<a href="#" class="btn btn-danger demo">Click me</a>

$('.demo').confirmation({
  onConfirm: function() {
    // do something
  },
  onCancel: function() { 
    // do something
  }
});

4. All default configuration options and callback functions.

$('.demo').confirmation({
  placement       : 'right',
  title           : 'Are you sure?',
  btnOkClass      : 'btn btn-sm btn-danger',
  btnOkLabel      : 'Delete',
  btnOkIcon       : 'glyphicon glyphicon-ok',
  btnCancelClass  : 'btn btn-sm btn-default',
  btnCancelLabel  : 'Cancel',
  btnCancelIcon   : 'glyphicon glyphicon-remove',
  href            : '#',
  target          : '_self',
  singleton       : true,
  popout          : true,
  onShow          : function(event, element) {},
  onHide          : function(event, element) {},
  onConfirm       : function(event, element) {},
  onCancel        : function(event, element) {},
  template        :   '<div class="popover"><div class="arrow"></div>'
                    + '<h3 class="popover-title"></h3>'
                    + '<div class="popover-content">'
                    + ' <a data-apply="confirmation">Yes</a>'
                    + ' <a data-dismiss="confirmation">No</a>'
                    + '</div>'
                    + '</div>'
});

Change log:

2017-12-23

• Update

---

This awesome jQuery plugin is developed by tavicu. For more Advanced Usages, please check the demo page or visit the official website.