diff --git a/packages/message-box/__tests__/MessageBox.spec.js b/packages/message-box/__tests__/MessageBox.spec.js
index 938f74540..1a1999c78 100644
--- a/packages/message-box/__tests__/MessageBox.spec.js
+++ b/packages/message-box/__tests__/MessageBox.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
 import MessageBox from '../src/main.vue'
 describe('MessageBox.vue', () => {
   afterEach(() => {
@@ -22,6 +23,48 @@ describe('MessageBox.vue', () => {
         closeOnClickModal: false
       }
     })
+    const _messagebox = messagebox.find('.el-message-box__message')
+    expect(_messagebox.text()).toBe('message')
     expect(messagebox.find('.el-message-box__wrapper').exists()).toBe(true)
   })
+
+  test('dangerouslyUseHTMLString', async () => {
+    const messagebox = await mount(MessageBox, {
+      props: {
+        title: 'title',
+        message: '<div>message</div>',
+        _type: 'alert',
+        closeOnPressEscape: false,
+        closeOnClickModal: false,
+        dangerouslyUseHTMLString: true
+      }
+    })
+    const _messagebox = messagebox.find('.el-message-box__message')
+    expect(_messagebox.text()).toBe('message')
+  })
+
+  test('test dome click', async () => {
+    const callBackAction = ref(null)
+    const messagebox = await mount(MessageBox, {
+      props: {
+        title: 'title',
+        message: '<div>message</div>',
+        _type: 'alert',
+        cancelButtonClass: 'el-cccc',
+        closeOnPressEscape: false,
+        closeOnClickModal: false,
+        showCancelButton: true,
+        dangerouslyUseHTMLString: true,
+        callback: (action) => {
+          callBackAction.value = action
+        }
+      }
+    })
+    await messagebox.find('.el-cccc').trigger('click')
+    const w = messagebox.find('.el-message-box__title span')
+    expect(w.text()).toBe('title')
+    setTimeout(() => {
+      expect(callBackAction.value).toBe('cancel')
+    })
+  })
 })
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
index ee58fd4be..d528104ac 100644
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -179,7 +179,7 @@ export default {
     },
     beforeClose: {
       type: Function,
-      default: () => {}
+      default: null
     },
     distinguishCancelAndClose: {
       type: Boolean,
@@ -292,7 +292,7 @@ export default {
       inputValue
     } = toRefs(props)
     const state = reactive({
-      visible: true,
+      visible: false,
       action: null,
       editorErrorMessage: null,
       uid: 0,
@@ -365,7 +365,6 @@ export default {
         return
       }
       state.action = action
-
       if (typeof unref(beforeClose) === 'function') {
         const close = getSafeClose()
         unref(beforeClose)(action, instance.proxy, close)
@@ -374,7 +373,13 @@ export default {
       }
     }
     const handleWrapperClick = () => {
-      if (!unref(closeOnClickModal)) {
+      if (unref(closeOnClickModal)) {
+        handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
+      }
+    }
+    const handleKeyup = (element = {}) => {
+      if (element.code !== 'Escape') return
+      if (unref(props.closeOnPressEscape)) {
         handleAction(unref(distinguishCancelAndClose) ? 'close' : 'cancel')
       }
     }
@@ -392,10 +397,10 @@ export default {
       )
     })
     const cancelButtonClasses = computed(() => {
-      return `${cancelButtonClass}`
+      return `el-button--primary ${unref(cancelButtonClass)}`
     })
     const confirmButtonClasses = computed(() => {
-      return `el-button--primary ${confirmButtonClass}`
+      return `el-button--primary ${unref(confirmButtonClass)}`
     })
     const getFirstFocus = () => {
       const btn = instance.ctx.$el.querySelector(
@@ -411,6 +416,7 @@ export default {
       return inputRefs.input || inputRefs.textarea
     }
     onMounted(() => {
+      state.visible = true
       nextTick(() => {
         state.uid++
         rendered.value = true
@@ -427,22 +433,22 @@ export default {
         focusAfterClosed,
         getFirstFocus()
       )
+      if (unref(closeOnHashChange)) {
+        window.addEventListener('hashchange', doClose)
+      }
+      window.addEventListener('keyup', handleKeyup)
       if (unref(_type) !== 'prompt') return
       setTimeout(() => {
         if (instance.refs.input && instance.refs.input.$el) {
           getInputElement().focus()
         }
       }, 500)
-      nextTick(() => {
-        if (unref(closeOnHashChange)) {
-          window.addEventListener('hashchange', () => {})
-        }
-      })
     })
     onUnmounted(() => {
       if (unref(closeOnHashChange)) {
-        window.removeEventListener('hashchange', () => {})
+        window.removeEventListener('hashchange', doClose)
       }
+      window.removeEventListener('keyup', handleKeyup)
       setTimeout(() => {
         messageBox.closeDialog()
       })