Merge branch 'master' into prompt-widget-documentation-adjustments

Author: dobooth

common/images/widget/alert-widget-result.png

@@ -56,6 +56,7 @@ The alert widget has the following options:
 -   [content]
 -   [focus]
 -   [title]
+-   [modalClass]
 
 ### `actions` {#alert_actions}
 Widget callbacks.
@@ -105,14 +106,83 @@ The title of the alert window.
 
 **Default value**: `''`
 
+### `modalClass` {#alert_modalClass}
+The CSS class of the alert window.
+
+**Type**: String.
+
+**Default value**: `'confirm'`
+
 ## Events {#alert_events}
 
 The alert widget implements a single event: the `always` callback.
+The `always` callback is invoked when a modal window is closed.
 
 ## Keyboard navigation {#alert_key_navigation}
 
 The keyboard navigation for the alert windows is similar to the [navigation of the modal widget].
 
+## Code Sample
+
+### Code sample of standalone initialization
+
+```html
+<div class="alert-modal-content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aut consequuntur culpa cum, distinctio earum harum, iste magnam nobis numquam pariatur tempora ullam vero vitae. Hic ipsam itaque velit.</p>
+</div>
+
+<script>
+require([
+    'jquery',
+    'Magento_Ui/js/modal/alert'
+], function ($, alert) {
+    'use strict';
+    
+    alert({
+        title: 'Alert Title',
+        content: $('.alert-modal-content'),
+        modalClass: 'alert',
+        actions: {
+            always: function() {
+                // do something when the modal is closed
+            }
+        }
+    });
+});
+</script>
+```
+
+### Code sample of initialization on an element
+
+```html
+<div class="alert-modal-content">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aut consequuntur culpa cum, distinctio earum harum, iste magnam nobis numquam pariatur tempora ullam vero vitae. Hic ipsam itaque velit.</p>
+</div>
+
+<script>
+require([
+    'jquery',
+    'Magento_Ui/js/modal/alert'
+], function ($) {
+    'use strict';
+    
+    $('.alert-modal-content').alert({
+        title: 'Alert Title',
+        modalClass: 'alert',
+        actions: {
+            always: function() {
+                // do something when the modal is closed
+            }
+        }
+    });
+});
+</script>
+```
+
+## Result
+
+![Alert Widget]({{ site.baseurl }}/common/images/widget/alert-widget-result.png)
+
 [Magento modal widget]: {{ page.baseurl }}/javascript-dev-guide/widgets/widget_modal.html
 [`<Magento_Ui_module_dir>/view/base/web/js/modal/alert.js`]: {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/modal/alert.js
 [Magento Admin Pattern Library, the Slide-out Panels, Modal Windows, and Overlays topic.]: {{ page.baseurl }}/pattern-library/containers/slideouts-modals-overlays/slideouts-modals-overalys.html#modals
@@ -123,4 +193,5 @@ The keyboard navigation for the alert windows is similar to the [navigation of t
 [content]: #alert_content
 [focus]: #alert_focus
 [title]: #alert_title
+[modalClass]: #alert_modalClass
 [navigation of the modal widget]: {{ page.baseurl }}/javascript-dev-guide/widgets/widget_modal.html#key_navigation