Skip to main content

HTML Modals

A reusable handled modal component

MDL-71963
MDL-72928
4.0

How it works

The core/utility module allows different modals to be displayed automatically when interacting with the page.

Modals are configured using a set of specific data-attributes.

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.

To display a confirmation modal. 

<button type="button" class="btn btn-primary" data-modal="confirmation" data-modal-title-str='["delete", "core"]'
data-modal-content-str='["areyousure"]' data-modal-yes-button-str='["delete", "core"]'>Show confirmation modal</button>

To display an alert modal. 

<button type="button" class="btn btn-primary" data-modal="alert" data-modal-title-str='["cookiesenabled", "core"]'
data-modal-content-str='["cookiesenabled_help_html", "core"]'>Show alert 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-modal' => 'modal',
    'data-modal-title-str' => json_encode(['delete', 'core']),
    'data-modal-content-str' => json_encode(['areyousure']),
    'data-modal-yes-button-str' => json_encode(['delete', 'core'])
]);
 ?>

Attributes

Data attribute Description
data-modal One of either "confirmation", or "alert".
data-modal-title-str The modal title language string identifier, must be provided in JSON encoded format.
data-modal-content-str The modal content or content language string identifier, must be provided in JSON encoded format.
data-modal-yes-button-str The language string identifier for the "Yes" button, must be provided in JSON encoded format. Confirmation modals only.
data-modal-toast If set to "true" it will display a modal toast in the end. Confirmation modals only.
data-modal-toast-confirmation-str The confirmation toast language string identifier, must be provided in JSON encoded format. Confirmation modals only.
data-modal-destination An url to redirect the user to. Confirmation modals only.

Examples

Basic Alert modal

<button type="button" class="btn btn-primary" data-modal="alert" data-modal-title-str='["cookiesenabled", "core"]'
data-modal-content-str='["cookiesenabled_help_html", "core"]'>Show alert modal</button>

Basic confirmation modal

<button type="button" class="btn btn-primary" data-modal="confirmation" data-modal-title-str='["delete", "core"]'
data-modal-content-str='["areyousure"]' data-modal-yes-button-str='["delete", "core"]'>Show confirmation modal</button>

Confirmation modal with a toast

<button type="button" class="btn btn-primary" data-modal="confirmation" data-modal-title-str='["delete", "core"]'
data-modal-content-str='["areyousure"]' data-modal-yes-button-str='["delete", "core"]' data-modal-toast="true"
data-modal-toast-confirmation-str='["deleteblockinprogress", "block", "Online users"]'>Show confirmation modal</button>

Confirmation modal with redirect

<button type="button" class="btn btn-primary" data-modal="confirmation" data-modal-title-str='["delete", "core"]'
data-modal-content-str='["areyousure"]' data-modal-yes-button-str='["delete", "core"]'
data-modal-destination="http://moodle.com">Show confirmation modal</button>