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>