Simple Confirmation Popover Plugin with jQuery and Bootstrap
File Size: | 8.69 KB |
---|---|
Views Total: | 23925 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.