UI Component library
Skip to main content
Confirm
A reusable confirmation modal component
MDL-71963
4.0
How it works
The confirm module is automatically invoked on page load, you just need to add some specific data attributes to the element that will trigger the confirmation modal.
Source files
lib/amd/src/utility.js
(core/utility)lib/templates/modal.mustache
Usage
The confirmation AMD module is loaded automatically, so the only thing you need to do is to add some specific data attributes to the target element:
<button type="button" class="btn btn-primary" data-confirmation="modal" data-confirmation-title-str='["delete", "core"]'
data-confirmation-content-str='["areyousure"]' data-confirmation-yes-button-str='["delete", "core"]'>Show confirmation modal</button>
You can also use it on PHP, you just need to set the attributes parameter to any moodle output component that takes attributes:
<?php
echo $OUTPUT->single_button('#', get_string('delete'), 'get', [
'data-confirmation' => 'modal',
'data-confirmation-title-str' => json_encode(['delete', 'core']),
'data-confirmation-content-str' => json_encode(['areyousure']),
'data-confirmation-yes-button-str' => json_encode(['delete', 'core'])
]);
?>
Attributes
Data attribute | Description |
---|---|
data-confirmation | The identifier value must be "modal" so the module can find and register an event listener for that element. |
data-confirmation-title-str | The modal title language string identifier, must be provided in JSON encoded format. |
data-confirmation-content-str | The modal main content language string identifier, must be provided in JSON encoded format. |
data-confirmation-yes-button-str | The language string identifier for the "Yes" button, must be provided in JSON encoded format. |
data-confirmation-toast | If set to "true" it will display a confirmation toast in the end. |
data-confirmation-toast-confirmation-str | The confirmation toast language string identifier, must be provided in JSON encoded format. |
data-confirmation-destination | An url to redirect the user to. |
Examples
Basic confirmation modal
Simple Modal
<button type="button" class="btn btn-primary" data-confirmation="modal" data-confirmation-title-str='["ok", "core"]'
data-confirmation-content-str='["areyousure"]' data-confirmation-yes-button-str='["ok", "core"]'>Show confirmation modal</button>
Delete Modal
<button type="button" class="btn btn-primary" data-confirmation="modal" data-confirmation-type="delete" data-confirmation-title-str='["delete", "core"]'
data-confirmation-content-str='["areyousure"]' data-confirmation-yes-button-str='["delete", "core"]'>Show delete modal</button>
Confirmation modal with a toast
<button type="button" class="btn btn-primary" data-confirmation="modal" data-confirmation-title-str='["save", "core"]'
data-confirmation-content-str='["areyousure"]' data-confirmation-yes-button-str='["save", "core"]' data-confirmation-toast="true"
data-confirmation-toast-confirmation-str='["saved", "core_question", "My question"]'>Show confirmation modal</button>
Confirmation modal with redirect
<button type="button" class="btn btn-primary" data-confirmation="modal" data-confirmation-title-str='["save", "core"]'
data-confirmation-content-str='["areyousure"]' data-confirmation-yes-button-str='["save", "core"]'
data-confirmation-destination="http://moodle.com">Show confirmation modal</button>