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