diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx
index f043fcd0eb..b1f8a85c94 100644
--- a/client/app/components/dashboards/AddWidgetDialog.jsx
+++ b/client/app/components/dashboards/AddWidgetDialog.jsx
@@ -1,8 +1,9 @@
 import { debounce, each, values, map, includes, first } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
 import Select from 'antd/lib/select';
+import Modal from 'antd/lib/modal';
+import ModalOpener from '@/hoc/ModalOpener';
 import highlight from '@/lib/highlight';
 import {
   MappingType,
@@ -19,15 +20,14 @@ const { Option, OptGroup } = Select;
 
 class AddWidgetDialog extends React.Component {
   static propTypes = {
-    dashboard: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    close: PropTypes.func,
-    dismiss: PropTypes.func,
+    dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+    onClose: PropTypes.func,
+    onConfirm: PropTypes.func,
   };
 
   static defaultProps = {
-    dashboard: null,
-    close: () => {},
-    dismiss: () => {},
+    onClose: () => {},
+    onConfirm: () => {},
   };
 
   constructor(props) {
@@ -40,12 +40,14 @@ class AddWidgetDialog extends React.Component {
       searchedQueries: [],
       selectedVis: null,
       parameterMappings: [],
+      showModal: false, // show only after recent queries populated to avoid height "jump"
     };
 
     // Don't show draft (unpublished) queries in recent queries.
     Query.recent().$promise.then((items) => {
       this.setState({
         recentQueries: items.filter(item => !item.is_draft),
+        showModal: true,
       });
     });
 
@@ -57,6 +59,10 @@ class AddWidgetDialog extends React.Component {
     };
   }
 
+  close = () => {
+    this.setState({ showModal: false });
+  }
+
   selectQuery(queryId) {
     // Clear previously selected query (if any)
     this.setState({
@@ -143,7 +149,8 @@ class AddWidgetDialog extends React.Component {
       .save()
       .then(() => {
         dashboard.widgets.push(widget);
-        this.props.close();
+        this.props.onConfirm();
+        this.close();
       })
       .catch(() => {
         toastr.error('Widget can not be added');
@@ -290,77 +297,37 @@ class AddWidgetDialog extends React.Component {
     );
 
     return (
-      <div>
-        <div className="modal-header">
-          <button
-            type="button"
-            className="close"
-            disabled={this.state.saveInProgress}
-            aria-hidden="true"
-            onClick={this.props.dismiss}
-          >
-            &times;
-          </button>
-          <h4 className="modal-title">Add Widget</h4>
-        </div>
-        <div className="modal-body">
-          {this.renderQueryInput()}
-          {!this.state.selectedQuery && this.renderSearchQueryResults()}
-          {this.state.selectedQuery && this.renderVisualizationInput()}
-
-          {
-            (this.state.parameterMappings.length > 0) && [
-              <label key="parameters-title" htmlFor="parameter-mappings">Parameters</label>,
-              <ParameterMappingListInput
-                key="parameters-list"
-                id="parameter-mappings"
-                mappings={this.state.parameterMappings}
-                existingParams={existingParams}
-                onChange={mappings => this.updateParamMappings(mappings)}
-              />,
-            ]
-          }
-        </div>
+      <Modal
+        visible={this.state.showModal}
+        afterClose={this.props.onClose}
+        title="Add Widget"
+        onOk={() => this.saveWidget()}
+        okButtonProps={{
+          loading: this.state.saveInProgress,
+          disabled: !this.state.selectedQuery,
+        }}
+        okText="Add to Dashboard"
+        onCancel={this.close}
+      >
+        {this.renderQueryInput()}
+        {!this.state.selectedQuery && this.renderSearchQueryResults()}
+        {this.state.selectedQuery && this.renderVisualizationInput()}
 
-        <div className="modal-footer">
-          <button
-            type="button"
-            className="btn btn-default"
-            disabled={this.state.saveInProgress}
-            onClick={this.props.dismiss}
-          >
-            Close
-          </button>
-          <button
-            type="button"
-            className="btn btn-primary"
-            disabled={this.state.saveInProgress || !this.state.selectedQuery}
-            onClick={() => this.saveWidget()}
-          >
-            Add to Dashboard
-          </button>
-        </div>
-      </div>
+        {
+          (this.state.parameterMappings.length > 0) && [
+            <label key="parameters-title" htmlFor="parameter-mappings">Parameters</label>,
+            <ParameterMappingListInput
+              key="parameters-list"
+              id="parameter-mappings"
+              mappings={this.state.parameterMappings}
+              existingParams={existingParams}
+              onChange={mappings => this.updateParamMappings(mappings)}
+            />,
+          ]
+        }
+      </Modal>
     );
   }
 }
 
-export default function init(ngModule) {
-  ngModule.component('addWidgetDialog', {
-    template: `
-      <add-widget-dialog-impl 
-        dashboard="$ctrl.resolve.dashboard"
-        close="$ctrl.close"
-        dismiss="$ctrl.dismiss"
-      ></add-widget-dialog-impl>
-    `,
-    bindings: {
-      resolve: '<',
-      close: '&',
-      dismiss: '&',
-    },
-  });
-  ngModule.component('addWidgetDialogImpl', react2angular(AddWidgetDialog));
-}
-
-init.init = true;
+export default ModalOpener(AddWidgetDialog);
diff --git a/client/app/components/dashboards/EditParameterMappingsDialog.jsx b/client/app/components/dashboards/EditParameterMappingsDialog.jsx
index 56b438fa5d..c76ad5e724 100644
--- a/client/app/components/dashboards/EditParameterMappingsDialog.jsx
+++ b/client/app/components/dashboards/EditParameterMappingsDialog.jsx
@@ -1,7 +1,8 @@
 import { map } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
+import Modal from 'antd/lib/modal';
+import ModalOpener from '@/hoc/ModalOpener';
 import {
   ParameterMappingListInput,
   parameterMappingsToEditableMappings,
@@ -10,17 +11,15 @@ import {
 
 class EditParameterMappingsDialog extends React.Component {
   static propTypes = {
-    dashboard: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    widget: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    close: PropTypes.func,
-    dismiss: PropTypes.func,
+    dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+    widget: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+    onClose: PropTypes.func,
+    onConfirm: PropTypes.func,
   };
 
   static defaultProps = {
-    dashboard: null,
-    widget: null,
-    close: () => {},
-    dismiss: () => {},
+    onClose: () => {},
+    onConfirm: () => {},
   };
 
   constructor(props) {
@@ -32,9 +31,14 @@ class EditParameterMappingsDialog extends React.Component {
         props.widget.query.getParametersDefs(),
         map(this.props.dashboard.getParametersDefs(), p => p.name),
       ),
+      showModal: true,
     };
   }
 
+  close = () => {
+    this.setState({ showModal: false });
+  }
+
   saveWidget() {
     const toastr = this.props.toastr; // eslint-disable-line react/prop-types
     const widget = this.props.widget;
@@ -45,7 +49,8 @@ class EditParameterMappingsDialog extends React.Component {
     widget
       .save()
       .then(() => {
-        this.props.close();
+        this.props.onConfirm();
+        this.close();
       })
       .catch(() => {
         toastr.error('Widget cannot be updated');
@@ -66,69 +71,24 @@ class EditParameterMappingsDialog extends React.Component {
     );
 
     return (
-      <div>
-        <div className="modal-header">
-          <button
-            type="button"
-            className="close"
-            disabled={this.state.saveInProgress}
-            aria-hidden="true"
-            onClick={this.props.dismiss}
-          >
-            &times;
-          </button>
-          <h4 className="modal-title">Parameters</h4>
-        </div>
-        <div className="modal-body">
-          {(this.state.parameterMappings.length > 0) && (
-            <ParameterMappingListInput
-              mappings={this.state.parameterMappings}
-              existingParams={existingParams}
-              onChange={mappings => this.updateParamMappings(mappings)}
-            />
-          )}
-        </div>
-
-        <div className="modal-footer">
-          <button
-            type="button"
-            className="btn btn-default"
-            disabled={this.state.saveInProgress}
-            onClick={this.props.dismiss}
-          >
-            Close
-          </button>
-          <button
-            type="button"
-            className="btn btn-primary"
-            disabled={this.state.saveInProgress}
-            onClick={() => this.saveWidget()}
-          >
-            Save
-          </button>
-        </div>
-      </div>
+      <Modal
+        visible={this.state.showModal}
+        afterClose={this.props.onClose}
+        title="Parameters"
+        onOk={() => this.saveWidget()}
+        okButtonProps={{ loading: this.state.saveInProgress }}
+        onCancel={this.close}
+      >
+        {(this.state.parameterMappings.length > 0) && (
+          <ParameterMappingListInput
+            mappings={this.state.parameterMappings}
+            existingParams={existingParams}
+            onChange={mappings => this.updateParamMappings(mappings)}
+          />
+        )}
+      </Modal>
     );
   }
 }
 
-export default function init(ngModule) {
-  ngModule.component('editParameterMappingsDialog', {
-    template: `
-      <edit-parameter-mappings-dialog-impl
-        dashboard="$ctrl.resolve.dashboard"
-        widget="$ctrl.resolve.widget"
-        close="$ctrl.close"
-        dismiss="$ctrl.dismiss"
-      ></edit-parameter-mappings-dialog-impl>
-    `,
-    bindings: {
-      resolve: '<',
-      close: '&',
-      dismiss: '&',
-    },
-  });
-  ngModule.component('editParameterMappingsDialogImpl', react2angular(EditParameterMappingsDialog));
-}
-
-init.init = true;
+export default ModalOpener(EditParameterMappingsDialog);
diff --git a/client/app/components/dashboards/widget.html b/client/app/components/dashboards/widget.html
index 6a37d4676b..94954841f7 100644
--- a/client/app/components/dashboards/widget.html
+++ b/client/app/components/dashboards/widget.html
@@ -21,7 +21,9 @@
 
             <li ng-if="$ctrl.canViewQuery || ($ctrl.dashboard.canEdit() && $ctrl.hasParameters())" class="divider"></li>
             <li ng-if="$ctrl.canViewQuery"><a ng-href="{{$ctrl.widget.getQuery().getUrl(true, $ctrl.widget.visualization.id)}}">View Query</a></li>
-            <li ng-if="$ctrl.dashboard.canEdit() && $ctrl.hasParameters()"><a ng-click="$ctrl.editParameterMappings()">Edit Parameters</a></li>
+            <li ng-if="$ctrl.dashboard.canEdit() && $ctrl.hasParameters()">
+              <li ng-if="$ctrl.dashboard.canEdit() && $ctrl.hasParameters()"><a ng-click="$ctrl.editParameterMappings()">Edit Parameters</a></li>
+            </li>
 
             <li ng-if="$ctrl.dashboard.canEdit()" class="divider"></li>
             <li ng-if="$ctrl.dashboard.canEdit()"><a ng-click="$ctrl.deleteWidget()">Remove from Dashboard</a></li>
diff --git a/client/app/components/dashboards/widget.js b/client/app/components/dashboards/widget.js
index d8e7f9653d..61069f15d3 100644
--- a/client/app/components/dashboards/widget.js
+++ b/client/app/components/dashboards/widget.js
@@ -2,6 +2,7 @@ import { filter } from 'lodash';
 import template from './widget.html';
 import editTextBoxTemplate from './edit-text-box.html';
 import widgetDialogTemplate from './widget-dialog.html';
+import editParameterMappingsDialog from '@/components/dashboards/EditParameterMappingsDialog';
 import './widget.less';
 import './widget-dialog.less';
 
@@ -78,13 +79,9 @@ function DashboardWidgetCtrl($location, $uibModal, $window, $rootScope, Events,
   this.hasParameters = () => this.widget.query.getParametersDefs().length > 0;
 
   this.editParameterMappings = () => {
-    $uibModal.open({
-      component: 'editParameterMappingsDialog',
-      resolve: {
-        dashboard: this.dashboard,
-        widget: this.widget,
-      },
-      size: 'lg',
+    editParameterMappingsDialog.open({
+      dashboard: this.dashboard,
+      widget: this.widget,
     }).result.then(() => {
       this.localParameters = null;
       $rootScope.$broadcast('dashboard.update-parameters');
diff --git a/client/app/hoc/ModalOpener.jsx b/client/app/hoc/ModalOpener.jsx
new file mode 100644
index 0000000000..e9e3801a2c
--- /dev/null
+++ b/client/app/hoc/ModalOpener.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const ModalOpener = (WrappedComponent) => {
+  const container = document.createElement('div');
+
+  const render = (component) => {
+    ReactDOM.render(component, container);
+    document.body.appendChild(container);
+  };
+
+  const destroy = () => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  };
+
+  const getResult = props => new Promise((resolve) => {
+    const component = (
+      <WrappedComponent
+        onClose={destroy}
+        onConfirm={resolve}
+        {...props}
+      />
+    );
+
+    render(component);
+  });
+
+  return {
+    open: props => ({
+      result: getResult(props),
+    }),
+  };
+};
+
+export default ModalOpener;
diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html
index c28ec8ebd9..a6ae111b7a 100644
--- a/client/app/pages/dashboards/dashboard.html
+++ b/client/app/pages/dashboards/dashboard.html
@@ -5,13 +5,13 @@
       <h3>
         <edit-in-place class="edit-in-place" is-editable="$ctrl.layoutEditing" on-done="$ctrl.saveName" ignore-blanks="true" value="$ctrl.dashboard.name" editor="'input'"></edit-in-place>
       </h3>
-      
+
       <img ng-src="{{$ctrl.dashboard.user.profile_image_url}}" class="profile__image_thumb--dashboard" alt="{{$ctrl.dashboard.user.name}}">
-      
+
       <dashboard-tags-control class="hidden-xs"
         tags="$ctrl.dashboard.tags" is-draft="$ctrl.dashboard.is_draft" is-archived="$ctrl.dashboard.is_archived"
         can-edit="$ctrl.isDashboardOwner" get-available-tags="$ctrl.loadTags" on-edit="$ctrl.saveTags"></dashboard-tags-control>
-      
+
     </div>
     <div class="col-xs-4 col-sm-5 col-lg-5 text-right dashboard__control p-r-0">
       <span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print">
@@ -110,7 +110,7 @@ <h2>
       <span class="hidden-xs hidden-sm">Widgets are individual query visualizations or text boxes you can place on your dashboard in various arrangements.</span>
     </h2>
     <div>
-      <a class="btn btn-default" ng-click="$ctrl.addWidget('textbox')">Add Textbox</a>
+      <a class="btn btn-default" ng-click="$ctrl.addTextBox">Add Textbox</a>
       <a class="btn btn-primary m-l-10" ng-click="$ctrl.addWidget('widget')">Add Widget</a>
     </div>
   </div>
diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
index 2c317e691d..e6be3262f7 100644
--- a/client/app/pages/dashboards/dashboard.js
+++ b/client/app/pages/dashboards/dashboard.js
@@ -5,6 +5,7 @@ import { policy } from '@/services/policy';
 import { durationHumanize } from '@/filters';
 import template from './dashboard.html';
 import shareDashboardTemplate from './share-dashboard.html';
+import AddWidgetDialog from '@/components/dashboards/AddWidgetDialog';
 import './dashboard.less';
 
 function isWidgetPositionChanged(oldPosition, newPosition) {
@@ -318,26 +319,32 @@ function DashboardCtrl(
     );
   };
 
-  this.addWidget = (widgetType) => {
-    const widgetTypes = {
-      textbox: 'addTextboxDialog',
-      widget: 'addWidgetDialog',
-    };
+  this.addTextBox = () => {
     $uibModal
       .open({
-        component: widgetTypes[widgetType],
+        component: 'addTextboxDialog',
         resolve: {
           dashboard: () => this.dashboard,
         },
       })
-      .result.then(() => {
-        this.extractGlobalParameters();
-        // Save position of newly added widget (but not entire layout)
-        const widget = _.last(this.dashboard.widgets);
-        if (_.isObject(widget)) {
-          return widget.save();
-        }
-      });
+      .result.then(this.onWidgetAdded);
+  };
+
+  this.addWidget = () => {
+    AddWidgetDialog
+      .open({
+        dashboard: this.dashboard,
+      })
+      .result.then(this.onWidgetAdded);
+  };
+
+  this.onWidgetAdded = () => {
+    this.extractGlobalParameters();
+    // Save position of newly added widget (but not entire layout)
+    const widget = _.last(this.dashboard.widgets);
+    if (_.isObject(widget)) {
+      return widget.save();
+    }
   };
 
   this.removeWidget = (widgetId) => {