diff --git a/guides/v2.1/javascript-dev-guide/widgets/images/confirm-widget-result.png b/guides/v2.1/javascript-dev-guide/widgets/images/confirm-widget-result.png new file mode 100644 index 00000000000..1c8b8dcac95 Binary files /dev/null and b/guides/v2.1/javascript-dev-guide/widgets/images/confirm-widget-result.png differ diff --git a/guides/v2.1/javascript-dev-guide/widgets/widget_confirm.md b/guides/v2.1/javascript-dev-guide/widgets/widget_confirm.md index df599352ee6..b4e7eb23c8d 100644 --- a/guides/v2.1/javascript-dev-guide/widgets/widget_confirm.md +++ b/guides/v2.1/javascript-dev-guide/widgets/widget_confirm.md @@ -58,6 +58,7 @@ For details about how to initialize a widget in a`.phtml` template, refer to the - [content](#confirm_content) - [focus](#confirm_focus) - [title](#confirm_title) +- [modalClass](#confirm_modalClass) ### `actions` {#confirm_actions} Widget callbacks. @@ -110,18 +111,98 @@ The title of the confirmation window. **Default value**: `''` +### `modalClass` {#confirm_modalClass} +The CSS class of the confirm window. + +**Type**: String. + +**Default value**: `'confirm'` + ## Events {#confirm_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. +- `always` callback: called when the popup is closed. ## Keyboard navigation {#confirm_key_navigation} The keyboard navigation for the alert windows is similar to the [navigation of the modal widget]. +## Code Sample + +### Code sample of initialization on an element + +```html +
+ + +``` + +### Code sample of standalone initialization + +```html + + + +``` + +## Result + + + [Magento modal widget]: {{page.baseurl}}/javascript-dev-guide/widgets/widget_modal.html [`