jQuery Plugin For Bootstrap Styled Confirmation Popover - BSConfirmation

BSConfirmation is a jQuery plugin that adds a Bootstrap based YES / NO confirm popover to your action button for asking the users if they want to perform the action.

See also:

• Simple Confirmation Popover Plugin with jQuery and Bootstrap

How to use it:

1. Load the JavaScript file confirmation.js into your Bootstrap project which has jQuery library loaded.

<script src="confirmation.js"></script>

2. Create an action button as follow.

<button href="http://example.com" id="demo">Click to toggle popover</button>

3. Enable the plugin on the action button and fire some callback events as the visitor clicks on the button.

$('#demo').confirmation({
  onShow: function() {
      console.log('Start show event');
  },

  onShown: function() {
      console.log('Show event has been completed');
  },

  onHide: function() {
      console.log('Start hide event');
  },

  onHidden: function() {
      console.log('Hide event has been completed');
  },

  onInserted: function() {
      console.log('Template has been added to the DOM');
  },

  onCancel: function() {
      console.log('canceled');
  },

  onConfirm: function() {
      console.log('confirmed');
  }
});

4. Options and defaults

// enable animation
animation: true,

// target container
container: false,

// custom content
content: '<div class="btn-group">'+
            '<a class="btn btn-success btn-xs" data-confirmation="confirm"><i class="glyphicon glyphicon-ok"></i> Yes</a>'+
            '<a class="btn btn-danger btn-xs" data-confirmation="cancel"><i class="glyphicon glyphicon-remove"></i> No</a>'+
         '</div>',

// animation delay
delay: 0,

// supports HTML
html: true,

// selector
selector: false,

// viewport
viewport: {selector: 'body', padding: 0},

// custom position
placement: 'top',

// title of the confirm popover
title: 'Are you sure?',

// custom template
template: '<div class="popover confirmation">' +
            '<div class="arrow"></div>' +
            '<h3 class="popover-title"></h3>' +
            '<div class="popover-content text-center">'+
            '</div>'+
         '</div>',

// fires immediately when the show instance method is called.
onShow : function() {},     

// fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
onShown : function() {},  

// fired immediately when the user cancel the confirmation
onCancel: function() {},  

// fired immediately when the user confirm the confirmation
onConfirm: function() {},

// fired immediately when the hide instance method has been called.
onHide: function() {}, 

// fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
onHidden: function() {},  

// fired after the show.bs.popover event when the popover template has been added to the DOM.
onInserted: function() {}

---

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