jQuery Plugin For Bootstrap Styled Confirmation Popover - BSConfirmation
File Size: | 3.3 KB |
---|---|
Views Total: | 2723 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
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.