MDL-78274 modal: Enable modals to be vertically centered

lib/amd/src/modal.js

@@ -561,6 +561,18 @@ export default class Modal {
         this.getModal().addClass('modal-lg');
     }
 
+    /**
+     * Mark the modal as a centered modal.
+     *
+     * @method setVerticallyCentered
+     */
+    setVerticallyCentered() {
+        if (this.isVerticallyCentered()) {
+            return;
+        }
+        this.getModal().addClass('modal-dialog-centered');
+    }
+
     /**
      * Check if the modal is a large modal.
      *
@@ -571,6 +583,16 @@ export default class Modal {
         return this.getModal().hasClass('modal-lg');
     }
 
+    /**
+     * Check if the modal is vertically centered.
+     *
+     * @method isVerticallyCentered
+     * @return {bool}
+     */
+    isVerticallyCentered() {
+        return this.getModal().hasClass('modal-dialog-centered');
+    }
+
     /**
      * Mark the modal as a small modal.
      *

lib/amd/src/modal_factory.js

@@ -165,6 +165,7 @@ const createFromType = (registryConf, templateContext) => {
 export const create = (modalConfig, triggerElement) => {
     const type = modalConfig.type || types.DEFAULT;
     const isLarge = modalConfig.large ? true : false;
+    const isVerticallyCentered = modalConfig.verticallyCentered ? true : false;
     // If 'scrollable' is not configured, set the modal to be scrollable by default.
     const isScrollable = modalConfig.hasOwnProperty('scrollable') ? modalConfig.scrollable : true;
 
@@ -199,6 +200,10 @@ export const create = (modalConfig, triggerElement) => {
                 modal.setLarge();
             }
 
+            if (isVerticallyCentered) {
+                modal.setVerticallyCentered();
+            }
+
             if (typeof modalConfig.removeOnClose !== 'undefined') {
                 // If configured remove the modal when hiding it.
                 modal.setRemoveOnClose(modalConfig.removeOnClose);