Overview
The Magento confirmation widget implements a modal pop-up window with the cancel and confirmation button.It is an extension of the Magento modal widget.
The confirmation widget source is <Magento_Ui_module_dir>/view/base/web/js/modal/confirm.js
The widget can be used for implementing confirmation windows for both, Admin and storefront. The design patterns for the modal pop-up windows in the Admin are described in the Magento Admin Pattern Library, the Slide-out Panels, Modal Windows, and Overlays topic.
Contents
Initialize the confirmation widget
The confirmation widget can be initialized with or without binding to a certain element.
Example1: initialization on an element
$('#confirm_init').confirm({
title: 'Confirmation title',
actions: {
confirm: function(){}, //callback on 'Ok' button click
cancel: function(){}, //callback on 'Cancel' button click
always: function(){}
}
});
Example2: standalone initialization
require([
'Magento_Ui/js/modal/confirm'
], function(confirmation) { // Variable that represents the `confirm` widget
confirmation({
title: 'Some title',
content: 'Some content',
actions: {
confirm: function(){},
cancel: function(){},
always: function(){}
}
});
});
For details about how to initialize a widget in a.phtml
template, refer to the Javascript initialization topic.
Options
actions
Widget callbacks.
Type: Object
Default value:
actions: {
confirm: function(){},
cancel: function(){},
always: function(){}
}
autoOpen
Automatically open the confirmation window when the widget is initialized.
Type: Boolean
Default value: false
clickableOverlay
Close the confirmation window when a user clicks on the overlay.
Type: Boolean
Default value: true
content
The confirmation window content.
Type: String.
focus
The selector of the element to be in focus when the confirmation window opens.
If focus
is not specified or set to empty string, the focus is on close button. If focusing is not requried, set focus
to none
.
Type: String.
Default value: ''
title
The title of the confirmation window.
Type: String.
Default value: ''
Events
The confirmation widget implements the following events:
confirm
callback: called when the confirmation button is clicked.cancel
callback: called when the cancel button is clicked.always
callback.
Keyboard navigation
The keyboard navigation for the alert windows is similar to the navigation of the modal widget
Find us on