From 95f8cbf59cb48786a8c924632eeaa7a7aed54540 Mon Sep 17 00:00:00 2001
From: "Min Ji, Choi" <30827184+mmindy@users.noreply.github.com>
Date: Wed, 4 Nov 2020 13:05:32 +0900
Subject: [PATCH] =?UTF-8?q?[#703][3.0]=20MessageBox=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20(#704)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

##########
- MessageBox 2.0 버전 마이그레이션 및 기능 개선
- 기타 스타일 및 불필요 코드 수정
- docs 샘플 페이지 생성
- message, notification 코드 개선

Co-authored-by: mjchoi <mjchoi@ex-em.com>
---
 docs/router/index.js                         |   7 +
 docs/views/messageBox/api/messageBox.md      |  57 ++++
 docs/views/messageBox/example/Default.vue    | 211 ++++++++++++
 docs/views/messageBox/props.js               |  15 +
 docs/views/notification/props.js             |   2 +-
 src/components/message/Message.vue           |  70 ++--
 src/components/message/index.js              |  10 +-
 src/components/messageBox/MessageBox.vue     | 339 +++++++++++++++++++
 src/components/messageBox/index.js           |  17 +
 src/components/notification/Notification.vue |  38 +--
 src/components/notification/index.js         |   9 +-
 src/main.js                                  |   3 +-
 12 files changed, 713 insertions(+), 65 deletions(-)
 create mode 100644 docs/views/messageBox/api/messageBox.md
 create mode 100644 docs/views/messageBox/example/Default.vue
 create mode 100644 docs/views/messageBox/props.js
 create mode 100644 src/components/messageBox/MessageBox.vue
 create mode 100644 src/components/messageBox/index.js

diff --git a/docs/router/index.js b/docs/router/index.js
index 634f3d312..24aba7a46 100644
--- a/docs/router/index.js
+++ b/docs/router/index.js
@@ -13,6 +13,7 @@ import iconProps from 'docs/views/icon/props';
 import datePickerProps from 'docs/views/datePicker/props';
 import calendarProps from 'docs/views/calendar/props';
 import messageProps from 'docs/views/message/props';
+import messageBoxProps from 'docs/views/messageBox/props';
 import notificationProps from 'docs/views/notification/props';
 
 const routes = [
@@ -148,6 +149,12 @@ const routes = [
     component: PageView,
     props: messageProps,
   },
+  {
+    path: '/messageBox',
+    name: 'MessageBox',
+    component: PageView,
+    props: messageBoxProps,
+  },
   {
     path: '/notification',
     name: 'Notification',
diff --git a/docs/views/messageBox/api/messageBox.md b/docs/views/messageBox/api/messageBox.md
new file mode 100644
index 000000000..d253b6588
--- /dev/null
+++ b/docs/views/messageBox/api/messageBox.md
@@ -0,0 +1,57 @@
+### Desc
+$messagebox 는 `app.config.globalProperties`에 등록되어 있어, 각 컴포넌트에서 아래처럼 사용 가능 
+```vue
+<template>
+    <ev-button
+      @click="showMsg"
+    >
+      Show Message
+    </ev-button>
+</template>
+<script>
+  import { getCurrentInstance } from 'vue';
+
+  export default {
+    setup() {
+      const { ctx } = getCurrentInstance();
+      const showMsg = () => {
+        ctx.$messagebox({
+          message: 'message',
+          // options
+        });
+      };
+      return {
+        showMsg,
+      };
+    },
+  }
+</script>
+```
+```js
+// 메시지만 입력 시,
+ctx.$messagebox('message');
+
+// 옵션과 사용 시,
+ctx.$messagebox({
+  message: 'message',
+  // options
+});
+```
+
+### Props
+
+| 이름 | 디폴트 | 타입 | 설명 | 종류 |
+| --- | ---- | ----- | ---- | --- |
+| type | '' | String | 메시지 스타일. type입력 시 좌측 상단에 타입에 맞는 아이콘 노출됨 | 'info', 'success', 'warning', 'error' |
+| message | '' | String | 메시지 창에 띄울 문구 | |
+| title | '' | String | 메시지 상단 타이틀 문구 | |
+| iconClass | '' | String | 메시지 창 좌측에 띄울 EVUI 아이콘 명 | |
+| onClose | null | Function | 메시지 창이 닫힌 후 동작. 매개변수로 클릭한 버튼 타입을 받음(ok, cancel). 닫기 버튼 및 모달 레이어 클릭으로 닫을 시 cancel | |
+| showClose | true | Boolean | 닫기 버튼 노출 여부 | true, false |
+| showConfirmBtn | true | Boolean | 확인 버튼 노출 여부 | true, false |
+| showCancelBtn | true | Boolean | 취소 버튼 노출 여부 | true, false |
+| confirmBtnText | 'OK' | String | 확인 버튼 문구 | |
+| cancelBtnText | 'Cancel' | String | 취소 버튼 문구 | |
+| closeOnClickModal | true | Boolean | 모달 레이어 클릭 시 메시지 창 닫기 여부 | true, false |
+| lockScroll | true | Boolean | 메시지 창 노출 시 스크롤 사라짐 여부 | true, false |
+| useHTML | false | Boolean | 메시지 창 문구에 HTML 사용 여부. 사용 시 message 속성에 함께 작성 | |
diff --git a/docs/views/messageBox/example/Default.vue b/docs/views/messageBox/example/Default.vue
new file mode 100644
index 000000000..d3afacd70
--- /dev/null
+++ b/docs/views/messageBox/example/Default.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="case">
+    <p class="case-title">Common</p>
+    <ev-button
+      type="info"
+      @click="showInfo"
+    >
+      Show Info
+    </ev-button>
+    <ev-button
+      type="primary"
+      @click="showSuccess"
+    >
+      Show Success
+    </ev-button>
+    <ev-button
+      type="warning"
+      @click="showWarning"
+    >
+      Show Warning
+    </ev-button>
+    <ev-button
+      type="error"
+      @click="showError"
+    >
+      Show Error
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">Title</p>
+    <ev-button
+      @click="showTitle"
+    >
+      Show Title
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">Icon</p>
+    <ev-button
+      @click="showIcon"
+    >
+      Show Icon
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">On/Off Element</p>
+    <ev-button
+      @click="showConfirm"
+    >
+      Hide Cancel
+    </ev-button>
+    <ev-button
+      @click="showCancel"
+    >
+      Hide Confirm
+    </ev-button>
+    <ev-button
+      @click="showClose"
+    >
+      Hide Close
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">Custom Button Text</p>
+    <ev-button
+      @click="showCustomText"
+    >
+      Custom Text
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">After Closing</p>
+    <ev-button
+      @click="showOnClose"
+    >
+      Show onClose
+    </ev-button>
+    <div class="description">
+      <span class="badge">
+        After close behavior
+      </span>
+      {{ onCloseMsg }}
+    </div>
+  </div>
+  <div class="case">
+    <p class="case-title">HTML</p>
+    <ev-button
+      @click="showHTML"
+    >
+      Show HTML
+    </ev-button>
+  </div>
+</template>
+
+<script>
+import { ref, getCurrentInstance } from 'vue';
+
+export default {
+  setup() {
+    const { ctx } = getCurrentInstance();
+    const showInfo = () => {
+      ctx.$messagebox({
+        message: 'Success! This is an Success type message.',
+        type: 'info',
+      });
+    };
+    const showSuccess = () => {
+      ctx.$messagebox({
+        message: 'Success! This is an Success type message.',
+        type: 'success',
+      });
+    };
+    const showWarning = () => {
+      ctx.$messagebox({
+        message: 'Warning. This is an Warning type message.',
+        type: 'warning',
+      });
+    };
+    const showError = () => {
+      ctx.$messagebox({
+        message: 'Error. This is an Error type message.',
+        type: 'error',
+      });
+    };
+    const showTitle = () => {
+      ctx.$messagebox({
+        title: 'Title!',
+        message: 'You can enter the title.',
+        iconClass: 'ev-icon-getmore',
+      });
+    };
+    const showIcon = () => {
+      ctx.$messagebox({
+        message: 'You can add an icon.',
+        iconClass: 'ev-icon-getmore',
+      });
+    };
+    const showConfirm = () => {
+      ctx.$messagebox({
+        title: 'On/Off Element',
+        message: 'Hide cancel button.',
+        iconClass: 'ev-icon-getmore',
+        showCancelBtn: false,
+      });
+    };
+    const showCancel = () => {
+      ctx.$messagebox({
+        title: 'On/Off Element',
+        message: 'Hide confirm button.',
+        iconClass: 'ev-icon-getmore',
+        showConfirmBtn: false,
+      });
+    };
+    const showClose = () => {
+      ctx.$messagebox({
+        title: 'On/Off Element',
+        message: 'Hide close button.',
+        iconClass: 'ev-icon-getmore',
+        showClose: false,
+      });
+    };
+    const showCustomText = () => {
+      ctx.$messagebox({
+        title: 'Custom Button Text',
+        message: 'You can modify the name of the button.',
+        iconClass: 'ev-icon-getmore',
+        confirmBtnText: 'Custom Confirm',
+        cancelBtnText: 'Custom Cancel',
+      });
+    };
+    const onCloseMsg = ref();
+    const showOnClose = () => {
+      ctx.$messagebox({
+        title: 'After Close Event',
+        message: 'You can set the behavior after closing.',
+        onClose: (type) => {
+          onCloseMsg.value = `[ type = '${type}' ] You can set the behavior after closing!`;
+        },
+      });
+    };
+    const showHTML = () => {
+      ctx.$messagebox({
+        title: 'Use HTML',
+        message: 'You <i>can enter</i> your message in <strong>html</strong>.',
+        useHTML: true,
+      });
+    };
+    return {
+      showInfo,
+      showSuccess,
+      showWarning,
+      showError,
+      showTitle,
+      showIcon,
+      showConfirm,
+      showCancel,
+      showClose,
+      showCustomText,
+      onCloseMsg,
+      showOnClose,
+      showHTML,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case .ev-button {
+  margin-right: 10px;
+}
+</style>
diff --git a/docs/views/messageBox/props.js b/docs/views/messageBox/props.js
new file mode 100644
index 000000000..c3e6dd359
--- /dev/null
+++ b/docs/views/messageBox/props.js
@@ -0,0 +1,15 @@
+import { parseComponent } from 'vue-template-compiler';
+import mdText from '!!raw-loader!./api/messageBox.md';
+import Default from './example/Default';
+import DefaultRaw from '!!raw-loader!./example/Default';
+
+export default {
+  mdText,
+  components: {
+    Default: {
+      description: '사용자 작업에 대한 확인 정보창을 표시할 수 있습니다. (버튼 클릭 시 메시지 창을 확인할 수 있습니다.)',
+      component: Default,
+      parsedData: parseComponent(DefaultRaw),
+    },
+  },
+};
diff --git a/docs/views/notification/props.js b/docs/views/notification/props.js
index ad8f8d418..e7acb70cb 100644
--- a/docs/views/notification/props.js
+++ b/docs/views/notification/props.js
@@ -7,7 +7,7 @@ export default {
   mdText,
   components: {
     Default: {
-      description: '사용자 동작에 대한 알림을 표시할 수 있습니다. (버튼 클릭 시 메시지 창을 확인할 수 있습니다.)',
+      description: '어플리케이션의 공지 알람을 표시할 수 있습니다. (버튼 클릭 시 메시지 창을 확인할 수 있습니다.)',
       component: Default,
       parsedData: parseComponent(DefaultRaw),
     },
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index d37c6e823..2f375e53e 100644
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -1,20 +1,21 @@
 <template>
-  <transition
-    name="ev-message-fade"
-    appear
-  >
-    <div
-      v-show="isShow"
-      ref="msgRef"
-      class="ev-message"
-      :class="{
-        [`type-${type}`]: !!type,
-        'show-close': showClose,
-        'has-icon': iconClass,
-      }"
-      @mouseenter="clearTimer"
-      @mouseleave="startTimer"
+  <teleport to="#ev-message-modal">
+    <transition
+      name="ev-message-fade"
+      appear
     >
+      <div
+        v-show="isShow"
+        ref="msgRef"
+        class="ev-message"
+        :class="{
+          [`type-${type}`]: !!type,
+          'show-close': showClose,
+          'has-icon': !!iconClass,
+        }"
+        @mouseenter="clearTimer"
+        @mouseleave="startTimer"
+      >
         <span
           v-if="iconClass"
           class="ev-message-icon"
@@ -23,26 +24,27 @@
             :class="iconClass"
           />
         </span>
-      <div
-        v-if="useHTML"
-        class="ev-message-content"
-        v-html="message"
-      />
-      <div
-        v-else
-        class="ev-message-content"
-      >
-        {{ message }}
-      </div>
-      <span
-        v-if="showClose"
-        class="ev-message-close"
-        @click="closeMsg"
-      >
+        <div
+          v-if="useHTML"
+          class="ev-message-content"
+          v-html="message"
+        />
+        <div
+          v-else
+          class="ev-message-content"
+        >
+          {{ message }}
+        </div>
+        <span
+          v-if="showClose"
+          class="ev-message-close"
+          @click="closeMsg"
+        >
           <i class="ev-icon-close" />
         </span>
-    </div>
-  </transition>
+      </div>
+    </transition>
+  </teleport>
 </template>
 
 <script>
@@ -139,7 +141,7 @@ export default {
 <style lang="scss">
 @import '../../style/index.scss';
 
-.ev-message-modal {
+#ev-message-modal {
   position: fixed;
   top: 0;
   left: 50%;
diff --git a/src/components/message/index.js b/src/components/message/index.js
index 5b4d2201b..23c397b10 100644
--- a/src/components/message/index.js
+++ b/src/components/message/index.js
@@ -3,11 +3,16 @@ import Component from './Message.vue';
 
 const componentObj = defineComponent(Component);
 
+const rootId = 'ev-message-modal';
 const root = document.createElement('div');
-root.classList.add('ev-message-modal');
-document.body.appendChild(root);
+root.id = rootId;
 
 const message = (options = {}) => {
+  const hasRoot = document.getElementById(rootId);
+  if (!hasRoot) {
+    document.body.appendChild(root);
+  }
+
   const container = document.createElement('div');
   const unmount = () => render(null, container);
   const msgOption = (typeof options === 'string') ? { message: options, unmount } : { ...options, unmount };
@@ -16,7 +21,6 @@ const message = (options = {}) => {
     msgOption,
   );
   render(instance, container);
-  root.appendChild(instance.el);
 };
 
 export default message;
diff --git a/src/components/messageBox/MessageBox.vue b/src/components/messageBox/MessageBox.vue
new file mode 100644
index 000000000..5adf3029b
--- /dev/null
+++ b/src/components/messageBox/MessageBox.vue
@@ -0,0 +1,339 @@
+<template>
+  <teleport to="body">
+    <transition
+      name="ev-message-box-fade"
+      appear
+    >
+      <div
+        v-show="isShow"
+        id="ev-message-box-modal"
+        @click.self="closeMsg('modal')"
+      >
+        <div
+          ref="msgRef"
+          class="ev-message-box"
+          :class="{
+          [`type-${type}`]: !!type,
+          'show-close': showClose,
+          'has-icon': !!iconName,
+          'has-title': !!title,
+        }"
+        >
+          <span
+            v-if="iconName"
+            class="ev-message-box-icon"
+          >
+            <i
+              :class="iconName"
+            />
+          </span>
+          <div class="ev-message-box-content">
+            <p
+              v-if="title"
+              class="ev-message-box-title"
+            >
+              {{ title }}
+            </p>
+            <p
+              v-if="useHTML"
+              class="ev-message-box-message"
+              v-html="message"
+            />
+            <p
+              v-else
+              class="ev-message-box-message"
+            >
+              {{ message }}
+            </p>
+          </div>
+          <div class="ev-message-box-btn">
+            <ev-button
+              v-if="showCancelBtn"
+              size="small"
+              class="ev-message-box-cancel"
+              @click="closeMsg('cancel')"
+            >
+              {{ cancelBtnText }}
+            </ev-button>
+            <ev-button
+              v-if="showConfirmBtn"
+              type="primary"
+              size="small"
+              class="ev-message-box-confirm"
+              @click="closeMsg('ok')"
+            >
+              {{ confirmBtnText }}
+            </ev-button>
+          </div>
+          <span
+            v-if="showClose"
+            class="ev-message-box-close"
+            @click="closeMsg('cancel')"
+          >
+            <i class="ev-icon-close" />
+          </span>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script>
+import { reactive, toRefs, watch, onMounted } from 'vue';
+import EvButton from '@/components/button/Button.vue';
+
+export default {
+  name: 'EvMessageBox',
+  components: {
+    EvButton,
+  },
+  props: {
+    type: {
+      type: String,
+      default: '',
+      validator: val => ['', 'info', 'success', 'warning', 'error'].includes(val),
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    message: {
+      type: String,
+      default: '',
+    },
+    iconClass: {
+      type: String,
+      default: '',
+    },
+    onClose: {
+      type: Function,
+      default: null,
+    },
+    showClose: {
+      type: Boolean,
+      default: true,
+    },
+    showConfirmBtn: {
+      type: Boolean,
+      default: true,
+    },
+    showCancelBtn: {
+      type: Boolean,
+      default: true,
+    },
+    confirmBtnText: {
+      type: String,
+      default: 'OK',
+    },
+    cancelBtnText: {
+      type: String,
+      default: 'Cancel',
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: true,
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true,
+    },
+    useHTML: {
+      type: Boolean,
+      default: false,
+    },
+    unmount: {
+      type: Function,
+      default: null,
+    },
+  },
+  setup(props) {
+    const state = reactive({
+      isShow: true,
+      iconName: '',
+    });
+    const closeMsg = (btnType) => {
+      if (!props.closeOnClickModal && btnType === 'modal') {
+        return;
+      }
+
+      const type = btnType === 'modal' ? 'cancel' : btnType;
+      state.isShow = false;
+
+      if (props.onClose) {
+        props.onClose(type);
+      }
+      if (props.unmount) {
+        setTimeout(props.unmount, 1000);
+      }
+    };
+    const keydown = (e) => {
+      if (e.keyCode === 27 && state.isShow) {
+        closeMsg();
+      }
+    };
+
+    const getIconName = (type) => {
+      switch (type) {
+        case 'success':
+          return 'ev-icon-arrow-check';
+        case 'warning':
+          return 'ev-icon-warning2';
+        case 'error':
+          return 'ev-icon-warning3';
+        case 'info':
+        default:
+          return 'ev-icon-info2';
+      }
+    };
+    const setState = () => {
+      if (props.iconClass) {
+        state.iconName = props.iconClass;
+      } else if (props.type) {
+        state.iconName = getIconName(props.type);
+      }
+      if (props.lockScroll) {
+        document.body.style.width = '100vw';
+        document.body.style.height = '100vh';
+        document.body.style.overflow = 'hidden';
+      }
+    };
+
+    onMounted(() => {
+      setState();
+      document.addEventListener('keydown', keydown);
+    });
+    watch(() => state.isShow, (val) => {
+      if (!val) {
+        document.removeEventListener('keydown', keydown);
+        if (props.lockScroll) {
+          document.body.style.width = 'auto';
+          document.body.style.height = 'auto';
+          document.body.style.overflow = 'auto';
+        }
+      }
+    });
+    return {
+      closeMsg,
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../style/index.scss';
+
+#ev-message-box-modal {
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 901;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity .2s ease-in-out;
+}
+.ev-message-box {
+  $padding-vertical: 20px;
+  $padding-horizontal: 17px;
+
+  position: relative;
+  width: 400px;
+  padding: $padding-vertical $padding-horizontal $padding-vertical - 5px;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+  border-radius: $default-radius;
+  background-color: #FDFDFD;
+  border: 1px solid #E3E3E3;
+  transition: opacity .2s ease-in-out, transform .3s ease-in-out;
+  font-size: $font-size-medium;
+  line-height: 1.5em;
+
+  &-fade-enter-active,
+  &-fade-leave-active {
+    .ev-message-box-layer {
+      opacity: 0;
+    }
+    .ev-message-box {
+      opacity: 0;
+      transform: translateY(-10%);
+    }
+  }
+  &-title {
+    margin-bottom: 17px;
+    font-size: $font-size-large;
+    font-weight: 700;
+  }
+  &-icon {
+    position: absolute;
+    top: $padding-vertical;
+    left: $padding-horizontal;
+    font-size: $font-size-large + 2px;
+  }
+  &-close {
+    position: absolute;
+    top: $padding-vertical;
+    right: $padding-horizontal;
+    font-size: $font-size-small;
+    cursor: pointer;
+    transition: opacity $animate-base;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+  &-btn {
+    margin-top: 23px;
+    text-align: right;
+    .ev-button {
+      min-width: 70px;
+      margin-left: 5px;
+    }
+  }
+
+  @include state('show-close') {
+    .ev-message-box-message {
+      margin-right: 20px;
+    }
+  }
+  @include state('has-icon') {
+    .ev-message-box-message {
+      margin-left: 23px;
+    }
+  }
+  @include state('has-title') {
+    .ev-message-box-message {
+      margin: 0 5px;
+    }
+    &.show-close {
+      .ev-message-box-title {
+        margin-right: 20px;
+      }
+      .ev-message-box-message {
+        margin-right: 5px;
+      }
+    }
+    &.has-icon {
+      .ev-message-box-title {
+        margin-left: 23px;
+      }
+      .ev-message-box-message {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  @each $type in ('info', 'success', 'warning', 'error') {
+    &.type-#{$type} {
+      .ev-message-box-icon {
+        @include evThemify() {
+          color: evThemed($type);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/messageBox/index.js b/src/components/messageBox/index.js
new file mode 100644
index 000000000..47400c0e3
--- /dev/null
+++ b/src/components/messageBox/index.js
@@ -0,0 +1,17 @@
+import { defineComponent, h, render } from 'vue';
+import Component from './MessageBox.vue';
+
+const componentObj = defineComponent(Component);
+
+const messageBox = (options = {}) => {
+  const container = document.createElement('div');
+  const unmount = () => render(null, container);
+  const msgOption = (typeof options === 'string') ? { message: options, unmount } : { ...options, unmount };
+  const instance = h(
+    componentObj,
+    msgOption,
+  );
+  render(instance, container);
+};
+
+export default messageBox;
diff --git a/src/components/notification/Notification.vue b/src/components/notification/Notification.vue
index 55994b332..2af4580bb 100644
--- a/src/components/notification/Notification.vue
+++ b/src/components/notification/Notification.vue
@@ -16,18 +16,15 @@
       @mouseleave="startTimer"
       @click="clickMsg"
     >
-        <span
-          v-if="iconClass"
-          class="ev-notification-icon"
-        >
-          <i
-            :class="iconClass"
-          />
-        </span>
-      <div
-        v-if="useHTML"
-        class="ev-notification-content"
+      <span
+        v-if="iconClass"
+        class="ev-notification-icon"
       >
+        <i
+          :class="iconClass"
+        />
+      </span>
+      <div class="ev-notification-content">
         <p
           v-if="title"
           class="title"
@@ -35,21 +32,14 @@
           {{ title }}
         </p>
         <p
+          v-if="useHTML"
           class="message"
           v-html="message"
         />
-      </div>
-      <div
-        v-else
-        class="ev-notification-content"
-      >
         <p
-          v-if="title"
-          class="title"
+          v-else
+          class="message"
         >
-          {{ title }}
-        </p>
-        <p class="message">
           {{ message }}
         </p>
       </div>
@@ -58,8 +48,8 @@
         class="ev-notification-close"
         @click="closeMsg"
       >
-          <i class="ev-icon-close" />
-        </span>
+        <i class="ev-icon-close" />
+      </span>
     </div>
   </transition>
 </template>
@@ -180,7 +170,7 @@ export default {
 <style lang="scss">
 @import '../../style/index.scss';
 
-.ev-notification-modal {
+#ev-notification-modal {
   max-height: 100vh;
   overflow: hidden;
 
diff --git a/src/components/notification/index.js b/src/components/notification/index.js
index 142959f39..dee9be6d3 100644
--- a/src/components/notification/index.js
+++ b/src/components/notification/index.js
@@ -3,18 +3,23 @@ import Component from './Notification.vue';
 
 const componentObj = defineComponent(Component);
 
+const rootId = 'ev-notification-modal';
 const root = document.createElement('div');
-root.classList.add('ev-notification-modal');
-document.body.appendChild(root);
+root.id = rootId;
 
 const positionList = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 
 const notification = (options = {}) => {
   const position = options.position || 'top-right';
   if (!positionList.includes(position)) {
+    console.warn('[EVUI][Notification] The position value is incorrectly entered.');
     return;
   }
 
+  const hasRoot = document.getElementById(rootId);
+  if (!hasRoot) {
+    document.body.appendChild(root);
+  }
   let wrapper = root.getElementsByClassName(`modal-${position}`);
   const hasElem = wrapper.length;
   if (hasElem) {
diff --git a/src/main.js b/src/main.js
index 617261274..bb7987eb1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@ import EvCalendar from '@/components/calendar/Calendar.vue';
 import EvTimePicker from '@/components/datePicker/DatePicker.vue';
 import EvMessage from '@/components/message/';
 import EvNotification from '@/components/notification/';
+import EvMessageBox from '@/components/messageBox/';
 import { version } from '../package.json';
 
 const components = [
@@ -43,7 +44,7 @@ const install = (app) => {
 
   const global = app.config.globalProperties;
   global.$message = EvMessage;
-  global.$messagebox = () => {};
+  global.$messagebox = EvMessageBox;
   global.$notify = EvNotification;
 };