Attaches a confirmation dialog to be triggered by clicking on the element.
JavaScript Required
Script
confirmation.js
and Bootstrap’s modal.js
must be included.
The message and confirmation button labels can be modified for each instance either by setting the options appropriately or by overriding the plugin default options which affects all instances on page.
Overriding Default Options Example
$(document).ready(function(){ // Localize confirmation messages into Czech $.fn.confirmation.Constructor.prototype.options = { 'confirm-message': 'Opravdu?', 'confirm-yes': 'Ano', 'confirm-no': 'Ne' }; });If overriding the default options while running the plugin in noConflict mode, the code above has to be modified by substituting
$.fn.confirmation.Constructor.prototype.options
with
$.fn.my_no_conflict_name.Constructor.prototype.options
.
Usage
Data-API
To bind confirmation dialog to an element, the element must have data-toggle="confirm"
attribute defined.
To override default options, you can use the same options as the JavaScript API prepended with data-
(i.e. data-confirm-yes="Oui"
).
Note that this component only supports <button>
elements.
JavaScript
Options
Name | Type | Default | Description |
---|---|---|---|
confirm-message | string | Are you sure? | Optional. The message to be displayed to the user in the confirmation dialog. |
confirm-yes | string | Yes | Optional. The text to be shown in the button that confirms the action. |
confirm-no | string | No | Optional. The text to be shown in the button that confirms the action. |
Methods
$().showConfirmation()
Triggers a confirmation dialog on the given element.
Events
Event Type | Description |
---|---|
show.bui.confirmation | Fired as soon as the confirmation dialog is displayed. |
confirmed.bui.confirmation | Fired when user confirms the dialog. |
rejected.bui.confirmation | Fired when user rejects the dialog. |
Example
<form onsubmit="alert('Confirmation confirmed');" method="get">
<button type="button" class="btn btn-danger" data-toggle="confirm">
Basic confirmation
</button>
<button
type="button"
class="btn btn-danger"
data-toggle="confirm"
data-confirm-message="Really?"
data-confirm-yes="Confirm"
data-confirm-no="Reject"
>
Confirmation with custom text
</button>
<button
type="button"
class="btn btn-danger"
data-toggle="confirm"
data-confirm-yes="<span class='glyphicon glyphicon-ok'></span>"
data-confirm-no="<span class='glyphicon glyphicon-remove'></span>"
>
Confirmation with icons
</button>
</form>