6.2. Confirmation

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>