Confirm

About

Confirm — is a subclass of Modal component with pre-configured buttons and autoOpen/autoRemove behavior.

View Source Code

Initialization

require(['Magento_Ui/js/modal/confirm'], (confirm) => {
    confirm({
        title: $t('Question'),
        content: $t('Are you sure?'),
        actions: {
            confirm: () => alert('Confirmed'),
            cancel: () => alert('Rejected')
        }
    });
});

Options

Here is a list of confirm options:

require(['Magento_Ui/js/modal/confirm'], (confirm) => {
    confirm({
        title: $t('Title'),
        content: $t('Content'),
        modalClass: 'confirm',
        focus: '.action-accept',
        actions: {
            always: function () {},
            confirm: function () {},
            cancel: function () {}
        },
        buttons: [{
            text: $t('Cancel'),
            class: 'action-secondary action-dismiss',
            click: function (event) {
                this.closeModal(event);
            }
        }, {
            text: $t('OK'),
            class: 'action-primary action-accept',
            click: function (event) {
                this.closeModal(event, true);
            }
        }]
    });
});

Methods

Here is a list of available confirm methods:

$(el).confirm('setTitle', 'title');
$(el).confirm('closeModal');

You can also get the confirm instance using instance method and call the methods directly:

var confirm = $(el).confirm('instance');

confirm.setTitle('title');
confirm.openModal();

Events

Here is a list of event listeners for modal events:

$(document).on('confirm:beforeCreate', (e, data) => {});
$(document).on('confirm:afterCreate', (e, data) => {});
$(document).on('confirm:opened', (e, data) => {});
$(document).on('confirm:closed', (e, data) => {});

Each listener receives event and data objects. Data object has instance property that refers to confirm widget that triggered the event.

Styles

Alert component fully reuse Modal styles.