JS Tutorial
- Overview
- Documents
Bootstrap Confirmation is a jQuery plugin for Twitter Bootstrap. Use Bootstrap Popovers as confirmation dialogs. Simple and easy, Confirmation plugin compatible with Twitter Bootstrap 3 extending Popover
Source: ethaizone.github.io
1. INCLUDE CSS AND JS FILES
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/bootstrap-tooltip.js"></script> <script type="text/javascript" src="path/to/bootstrap-confirmation.js"></script>
2. HTML
<a href="#" class="btn btn-default" data-toggle="confirmation">Click me</a>
3. JAVASCRIPT
$('[data-toggle="confirmation"]').confirmation();
4. OPTIONS
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
| Name | type | default | description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the tooltip |
| placement | string | function | 'top' | How to position the confirmation - top | bottom | left | right |
| selector | string | false | If a selector is provided, tooltip objects will be delegated to the specified targets |
| trigger | string | 'click' | How confirmation is triggered - click | hover | focus | manual |
| title | string | function | 'Are you sure?' | Default title value if `data-title` attribute isn't present |
| href | string | function | '#' |
Default href value if `data-href` attribute isn't present. This will be link of the "Ok" button. |
| target | string | function | '_self' |
Default target value if `data-target` attribute isn't present. This will be target of the "Ok" button. |
| btnOkClass | string | function | 'btn-primary' |
Default btnOkClass value if `data-btnOkClass` attribute isn't present. This will be class of the "Ok" button. |
| btnCancelClass | string | function | '' |
Default btnCancelClass value if `data-btnCancelClass` attribute isn't present. This will be class of the "Cancel" button. |
| btnOkLabel | string | function | '<i class="icon-ok-sign icon-white"></i> Yes' |
Default btnOkLabel value if `data-btnOkLabel` attribute isn't present. This will be label of the "Ok" button. |
| btnCancelLabel | string | function | '<i class="icon-remove-sign"></i> No' |
Default btnCancelLabel value if `data-btnCancelLabel` attribute isn't present. This will be label of the "Cancel" button. |
|
singleton New feature! |
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 New feature! |
boolean | false |
Set true to hide the confirmation when user clicks outside of it. This will affect all confirmations that use same selector. |
| delay | number | object | 0 |
Delay showing and hiding the confirmation (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: { show: 500, hide: 100 } |
| container | string | false | false |
Appends the confirmation to a specific element container: 'body' |
| onConfirm | function | function(){} |
Set event when click at confirm button |
| onCancel | function | function(){} |
Set event when click at cancel button |
5. METHODS
$().confirmation(options)
Initializes confirmations for an element collection.
.confirmation('show')
Reveals an elements confirmation.
$('#element').confirmation('show')
.confirmation('hide')
Hides an elements confirmation.
$('#element').confirmation('hide')
.confirmation('toggle')
Toggles an elements confirmation.
$('#element').confirmation('toggle')
.confirmation('destroy')
Hides and destroys an element's confirmation.
$('#element').confirmation('destroy')
