diff --git a/src/components/ModalButton/index.jsx b/src/components/ModalButton/index.jsx
index d85f0bd7..66b8da92 100644
--- a/src/components/ModalButton/index.jsx
+++ b/src/components/ModalButton/index.jsx
@@ -65,6 +65,34 @@ export default class ModalButton extends Component {
     };
   }
 
+  componentWillUnmount() {
+    this.removeListener();
+  }
+
+  addListener = () => {
+    const modalTarget =
+      document.getElementsByClassName('modal-button-modal')[0];
+    this.modalTarget = modalTarget;
+    if (modalTarget) {
+      this.listenerResult = modalTarget.addEventListener(
+        'click',
+        this.onClickModal
+      );
+    }
+  };
+
+  removeListener = () => {
+    const modalTarget =
+      document.getElementsByClassName('modal-button-modal')[0];
+    if (modalTarget) {
+      this.listenerResult = modalTarget.removeEventListener(
+        'click',
+        this.onClickModal
+      );
+    }
+    this.modalTarget = null;
+  };
+
   getModalWidth = (size) => {
     switch (size) {
       case 'small':
@@ -79,7 +107,7 @@ export default class ModalButton extends Component {
   };
 
   onClick = (e) => {
-    e && e.stopPropagation();
+    this.stopEvent(e);
     const { onClickButton } = this.props;
     onClickButton && onClickButton();
     this.showModal();
@@ -90,7 +118,8 @@ export default class ModalButton extends Component {
     onFinishAction && onFinishAction();
   };
 
-  handleOk = () => {
+  handleOk = (e) => {
+    this.stopEvent(e);
     const { handleOk } = this.props;
     if (handleOk) {
       this.setState({
@@ -118,22 +147,66 @@ export default class ModalButton extends Component {
     }
   };
 
-  handleCancel = () => {
+  handleCancel = (e) => {
+    this.stopEvent(e);
     const { onCancelAction } = this.props;
     onCancelAction && onCancelAction();
     this.hideModal();
   };
 
   hideModal = () => {
+    this.removeListener();
     this.setState({
       visible: false,
     });
   };
 
   showModal = () => {
-    this.setState({
-      visible: true,
-    });
+    this.setState(
+      {
+        visible: true,
+      },
+      () => {
+        setTimeout(() => {
+          this.addListener();
+        }, 0);
+      }
+    );
+  };
+
+  stopEvent = (e) => {
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    }
+    if (e && e.stopPropagation) {
+      e.stopPropagation();
+    }
+  };
+
+  onClickModal = (e) => {
+    if (!this.modalTarget) {
+      this.stopEvent(e);
+      return;
+    }
+    const buttons = this.modalTarget.getElementsByTagName('button');
+    const { innerHTML = '' } = e.target || {};
+    let isButton = false;
+    for (let i = 0; i < buttons.length; i++) {
+      if (isButton) {
+        return;
+      }
+      const specialInner = ['-', ''];
+      if (
+        !specialInner.includes(innerHTML) &&
+        buttons[i].innerHTML.includes(innerHTML)
+      ) {
+        isButton = true;
+      }
+    }
+    if (isButton) {
+      return;
+    }
+    this.stopEvent(e);
   };
 
   renderModal() {
@@ -171,7 +244,11 @@ export default class ModalButton extends Component {
         style: { display: 'none' },
       };
     }
-    return <Modal {...configs}>{content}</Modal>;
+    return (
+      <Modal {...configs} className="modal-button-modal">
+        {content}
+      </Modal>
+    );
   }
 
   render() {
diff --git a/src/components/TableButton/RuleButton.jsx b/src/components/TableButton/RuleButton.jsx
index 19d15634..bec56a86 100644
--- a/src/components/TableButton/RuleButton.jsx
+++ b/src/components/TableButton/RuleButton.jsx
@@ -34,6 +34,7 @@ export default class RuleButton extends Component {
       modalSize: 'middle',
       columns: getSelfColumns(this),
       data,
+      hasPagination: false,
     };
     return <TableButton {...configs} style={{ paddingLeft: 0 }} />;
   }
diff --git a/src/components/TableButton/index.jsx b/src/components/TableButton/index.jsx
index 5d7cabaa..3dfc8f6c 100644
--- a/src/components/TableButton/index.jsx
+++ b/src/components/TableButton/index.jsx
@@ -29,6 +29,7 @@ export default class TableButton extends Component {
       className: PropTypes.func,
       buttonText: PropTypes.string,
       style: PropTypes.string,
+      hasPagination: PropTypes.bool,
     };
   }
 
@@ -41,11 +42,19 @@ export default class TableButton extends Component {
     className: '',
     buttonText: t('View Detail'),
     title: t('Detail'),
+    hasPagination: true,
   };
 
   renderTable = () => {
-    const { data, columns } = this.props;
-    return <Table columns={columns} dataSource={data} />;
+    const { data, columns, hasPagination } = this.props;
+    const configs = {
+      columns,
+      dataSource: data,
+    };
+    if (!hasPagination) {
+      configs.pagination = false;
+    }
+    return <Table {...configs} />;
   };
 
   render() {
diff --git a/src/pages/compute/containers/Instance/Detail/SecurityGroup/action/ManageSecurityGroup.jsx b/src/pages/compute/containers/Instance/Detail/SecurityGroup/action/ManageSecurityGroup.jsx
index d24a80ca..f5187702 100644
--- a/src/pages/compute/containers/Instance/Detail/SecurityGroup/action/ManageSecurityGroup.jsx
+++ b/src/pages/compute/containers/Instance/Detail/SecurityGroup/action/ManageSecurityGroup.jsx
@@ -76,7 +76,6 @@ export class ManageSecurityGroup extends ModalAction {
         isMulti: true,
         filterParams: securityGroupFilter,
         columns: securityGroupColumns,
-        onRow: () => {},
       },
     ];
   }
diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx
index 50bdef91..6e18c33e 100644
--- a/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx
@@ -254,7 +254,6 @@ export class NetworkStep extends Base {
         ),
         filterParams: securityGroupFilter,
         columns: securityGroupColumns,
-        onRow: () => {},
       },
     ];
   }
diff --git a/src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx b/src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx
index 2802bdf3..1214550a 100644
--- a/src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx
+++ b/src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx
@@ -187,7 +187,6 @@ export class ManageSecurityGroup extends ModalAction {
         isMulti: true,
         filterParams: securityGroupFilter,
         columns: securityGroupColumns,
-        onRow: () => {},
       },
     ];
   }
diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx
index 4b36c7d4..0c12a5c8 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx
@@ -293,7 +293,6 @@ export class NetworkStep extends Base {
         ),
         filterParams: securityGroupFilter,
         columns: securityGroupColumns,
-        onRow: () => {},
       },
     ];
   }
diff --git a/src/pages/network/containers/Port/actions/ManageSecurityGroup.jsx b/src/pages/network/containers/Port/actions/ManageSecurityGroup.jsx
index 9d16cfa5..795c56d1 100644
--- a/src/pages/network/containers/Port/actions/ManageSecurityGroup.jsx
+++ b/src/pages/network/containers/Port/actions/ManageSecurityGroup.jsx
@@ -139,7 +139,6 @@ export class ManageSecurityGroup extends ModalAction {
         isMulti: true,
         filterParams: securityGroupFilter,
         columns: securityGroupColumns,
-        onRow: () => {},
         hidden: !port_security_enabled,
       },
     ];