diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
index 371754c0e0..fe470ddb6e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/shell.jsp
@@ -15,7 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
-<div id="shell-dialog" class="hidden cancellable" data-nf-dialog='{"responsive": {"x": "false", "y": "false"}}'>
+<div id="shell-dialog" class="hidden cancellable">
     <div id="shell-container" class="dialog-content">
         <div id="shell-close-container">
             <button id="shell-undock-button" class="undock-normal pointer " title="Open in New Window">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
index 7fede63501..1e73676849 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
@@ -16,8 +16,13 @@
  */
 
 /**
- * Create a new dialog. The options are specified in the following
- * format:
+ * Create a new dialog.
+ *
+ * If the height, width, and fullscreen breakpoints options are not set this plugin will look for (and use)
+ * any CSS defined styles for height, min/max-height, width, min/max-width. If no CSS styles are defined then the
+ * plugin will attempt to calculate these values when the dialog is first opened (based on screen size).
+ *
+ * The options are specified in the following format:
  *
  * {
  *   header: true,
@@ -49,7 +54,18 @@
  *      close: closeHandler,
  *      open: openHandler,
  *      resize: resizeHandler
- *   }
+ *   },
+ *   height: "55%", //optional. Property can also be set with css (accepts 'px' or '%' values)
+ *   width: "34%", //optional. Property can also be set with css (accepts 'px' or '%' values)
+ *   min-height: "420px", //optional, defaults to 'height'. Property  can also be set with css (accepts 'px' values)
+ *   min-width: "470px" //optional, defaults to 'width'. Property can also be set with css (accepts 'px' values)
+ *   responsive: {
+ *       x: "true", //optional, default true
+ *       y: "true", //optional, default true
+ *       fullscreen-height: "420px", //optional, default is original dialog height (accepts 'px' values)
+ *       fullscreen-width: "470px", //optional, default is original dialog width (accepts 'px' values)
+ *      },
+ *      glasspane: "#728E9B" //optional, sets the color of modal glasspane...default if unset is the dialog header color
  * }
  *
  * The content of the dialog MUST be contained in an element with the class `dialog-content`
@@ -61,27 +77,6 @@
  *  </div>
  * </div>
  *
- * The height, width, and fullscreen breakpoints can be set on the dialog element through the
- * HTML5 `data-nf-dialog` attribute (These options must be a valid JSON format represented as a string).
- * If the `data-nf-dialog` attributes are not set this plugin will look for any CSS styles defined
- * for height, min/max-height, width, min/max-width and set them on the `data-nf-dialog` attribute.
- * If no styles are set on the dialog then the plugin will set the `data-nf-dialog` attributes to values
- * calculated when the dialog is first opened. Options are specified in the following format:
- *
- *  {
- *      "height": "55%", //optional. Property can also be set with css (accepts 'px' or '%' values)
- *      "width":"34%", //optional. Property can also be set with css (accepts 'px' or '%' values)
- *      "min-height": "420px", //optional, defaults to 'height'. Property  can also be set with css (accepts 'px' values)
- *      "min-width": "470px" //optional, defaults to 'width'. Property can also be set with css (accepts 'px' values)
- *      "responsive": {
- *          "x": "true", //optional, default true
- *          "y": "true", //optional, default true
- *          "fullscreen-height": "420px", //optional, default is original dialog height (accepts 'px' values)
- *          "fullscreen-width": "470px", //optional, default is original dialog width (accepts 'px' values)
- *      },
- *      "glasspane": "#728E9B" //optional, set the color of modal glasspane...default if unset is the dialog header color
- *  }
- *
  * @argument {jQuery} $
  */
 (function ($) {
@@ -139,66 +134,42 @@
          */
         init: function (options) {
             return this.each(function () {
+                // get the combo
+                var dialog = $(this).addClass('dialog cancellable modal');
+                dialog.css('display', 'none');
+
+                var nfDialog = {};
+                if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                    nfDialog = dialog.data('nf-dialog');
+                }
+
                 // ensure the options have been properly specified
                 if (isDefinedAndNotNull(options)) {
 
-                    // get the combo
-                    var dialog = $(this).addClass('dialog cancellable modal');
-                    dialog.css('display', 'none');
-
-                    // determine if dialog needs a header
-                    if (!isDefinedAndNotNull(options.header) || options.header) {
-                        var dialogHeaderText = $('<span class="dialog-header-text"></span>');
-                        var dialogHeader = $('<div class="dialog-header"></div>').prepend(dialogHeaderText);
-
-                        // determine if the specified header text is null
-                        if (!isBlank(options.headerText)) {
-                            dialogHeaderText.text(options.headerText);
-                        }
-
-                        dialog.prepend(dialogHeader);
-                    }
-
-                    var nfDialog = {};
-                    if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
-                        nfDialog = dialog.data('nf-dialog');
-                    }
-
-                    // save the close handler
-                    if (isDefinedAndNotNull(options.handler)) {
-                        if (isDefinedAndNotNull(options.handler.close)) {
-                            nfDialog.close = options.handler.close;
-                        }
-                    }
-
-                    // save the open handler
-                    if (isDefinedAndNotNull(options.handler)) {
-                        if (isDefinedAndNotNull(options.handler.open)) {
-                            nfDialog.open = options.handler.open;
-                        }
-                    }
-
-                    // save the open handler
-                    if (isDefinedAndNotNull(options.handler)) {
-                        if (isDefinedAndNotNull(options.handler.resize)) {
-                            nfDialog.resize = options.handler.resize;
-                        }
-                    }
-
-                    // save the scrollable class name
-                    if (isDefinedAndNotNull(options.scrollableContentStyle)) {
-                        nfDialog.scrollableContentStyle = options.scrollableContentStyle;
-                    }
-
-                    // determine if dialog needs footer/buttons
-                    if (!isDefinedAndNotNull(options.footer) || options.footer) {
-                        // add the buttons
-                        addButtons(dialog, options.buttons);
-                    }
+                    $.extend(nfDialog, options);
 
                     //persist data attribute
                     dialog.data('nfDialog', nfDialog);
                 }
+
+                // determine if dialog needs a header
+                if (!isDefinedAndNotNull(nfDialog.header) || nfDialog.header) {
+                    var dialogHeaderText = $('<span class="dialog-header-text"></span>');
+                    var dialogHeader = $('<div class="dialog-header"></div>').prepend(dialogHeaderText);
+
+                    // determine if the specified header text is null
+                    if (!isBlank(nfDialog.headerText)) {
+                        dialogHeaderText.text(nfDialog.headerText);
+                    }
+
+                    dialog.prepend(dialogHeader);
+                }
+
+                // determine if dialog needs footer/buttons
+                if (!isDefinedAndNotNull(nfDialog.footer) || nfDialog.footer) {
+                    // add the buttons
+                    addButtons(dialog, nfDialog.buttons);
+                }
             });
         },
 
@@ -214,7 +185,10 @@
                 if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
                     nfDialog = $(dialog).data('nf-dialog');
                 }
-                nfDialog.close = handler;
+                if (!isDefinedAndNotNull(nfDialog.handler)){
+                    nfDialog.handler = {};
+                }
+                nfDialog.handler.close = handler;
 
                 //persist data attribute
                 $(dialog).data('nfDialog', nfDialog);
@@ -233,7 +207,10 @@
                 if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
                     nfDialog = $(dialog).data('nf-dialog');
                 }
-                nfDialog.open = handler;
+                if (!isDefinedAndNotNull(nfDialog.handler)){
+                    nfDialog.handler = {};
+                }
+                nfDialog.handler.open = handler;
 
                 //persist data attribute
                 $(dialog).data('nfDialog', nfDialog);
@@ -252,7 +229,10 @@
                 if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
                     nfDialog = $(dialog).data('nf-dialog');
                 }
-                nfDialog.resize = handler;
+                if (!isDefinedAndNotNull(nfDialog.handler)){
+                    nfDialog.handler = {};
+                }
+                nfDialog.handler.resize = handler;
 
                 //persist data attribute
                 $(dialog).data('nfDialog', nfDialog);
@@ -432,10 +412,12 @@
                 }
             }
 
-            // invoke the handler
-            var handler = dialog.data('nf-dialog').resize;
-            if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
-                handler.call(dialog);
+            if (isDefinedAndNotNull(nfDialog.handler)) {
+                var handler = nfDialog.handler.resize;
+                if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
+                    // invoke the handler
+                    handler.call(dialog);
+                }
             }
         },
 
@@ -475,9 +457,10 @@
                 glasspane = nfDialog.glasspane;
             } else {
                 nfDialog.glasspane = glasspane = dialog.find('.dialog-header').css('background-color'); //default to header color
-                if(top !== window || !isDefinedAndNotNull(nfDialog.glasspane)) {
-                    nfDialog.glasspane = glasspane = 'transparent';
-                }
+            }
+
+            if(top !== window || !isDefinedAndNotNull(nfDialog.glasspane)) {
+                nfDialog.glasspane = glasspane = 'transparent';
             }
 
             //create glass pane overlay
@@ -498,10 +481,12 @@
                     dialog.modal('resize');
                     dialog.center();
 
-                    // invoke the handler
-                    var handler = dialog.data('nf-dialog').open;
-                    if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
-                        handler.call(dialog);
+                    if (isDefinedAndNotNull(nfDialog.handler)) {
+                        var handler = nfDialog.handler.open;
+                        if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
+                            // invoke the handler
+                            handler.call(dialog);
+                        }
                     }
                 }
             });
@@ -514,10 +499,17 @@
             return this.each(function () {
                 var dialog = $(this);
 
-                // invoke the handler
-                var handler = dialog.data('nf-dialog').close;
-                if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
-                    handler.call(dialog);
+                var nfDialog = {};
+                if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                    nfDialog = dialog.data('nf-dialog');
+                }
+
+                if (isDefinedAndNotNull(nfDialog.handler)) {
+                    var handler = nfDialog.handler.close;
+                    if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
+                        // invoke the handler
+                        handler.call(dialog);
+                    }
                 }
 
                 // remove the modal glass pane overlay
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
index fb36d35543..93cbfb3c6c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
@@ -22,7 +22,11 @@ $(document).ready(function () {
     $('#shell-dialog').modal({
         scrollableContentStyle: 'scrollable',
         header: false,
-        footer: false
+        footer: false,
+        responsive: {
+            x: false,
+            y: false
+        }
     });
 
     // register a listener when the frame is closed