Magento 2.0.18 is the final 2.0.x release. After March 2018, Magento 2.0.x will no longer receive security patches, quality fixes, or documentation updates.
To maintain your site's performance, security, and PCI compliance, upgrade to the latest version of Magento.

Modal widget

The Magento modal widget implements a secondary window that opens on top of the main window. It contains the overlay and modal content. The modal widget configuration enables the following:

  • Configuring as popup or slide
  • Controlling stack of modal widgets
  • Setting buttons for action bar

The modal widget source is <Magento_Ui_module_dir>/view/base/web/js/modal/modal.js

The widget uses the following templates:

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.

To initialize the widget in your script, use the following general notation:

$('#modal_content').modal({
    <option1>: <value1>,
    <option2>: <value2>,
    ...
});

For details about how to initialize the widget in a.phtml template, refer to the JavaScript initialization topic.

The modal widget has the following options:

Automatically open the modal window when the widget is initialized.

Type: Boolean

Default value: false

Array of buttons for action pane.

Type: Array

Structure:

buttons: [{
    text: '',
    class: '',
    click: function() {} //handler on button click
}]

Default value:

buttons: [{
    text: 'Ok',
    class: '',
    click: function() {
        this.closeModal();
    }
}]

Close the modal window when a user clicks on the overlay.

Type: Boolean

Default value: true

Selector to focusing when a modal window opens or ‘none’ if focusing is not necessary.

Type: String

Default value: ''

Modal scroll position.

Type: Boolean

Default value: false

Custom classes for modal window.

Type: String

Default value: empty

Sets a margin between slide modal windows.

Type: Number

Default value: 45

Turn popup modal window to slide panel on small screens. Available if the type option is set to modal.

Type: Boolean

Default value: false

Translated title for popup window.

Type: String

Default value: empty

The type of window: popup or slide.

Type: String

Default value: popup

The modal widget has the following methods:

Open the modal window.

Close the modal window.

The modal widget is subscribed to the following events:

Called when the modal window is closed.

Called when the modal window is opened.

….

Keyboard navigation

  • the ESC key: close the current modal window
  • the TAB key: set focus to the next focusable element (looped inside the modal window)
  • the SHIFT+TAB keys combination: set focus to the previous focusable element (looped inside the modal window)