diff --git a/src/base/basic-var.less b/src/base/basic-var.less
index 8194bc8..56c175b 100644
--- a/src/base/basic-var.less
+++ b/src/base/basic-var.less
@@ -77,19 +77,20 @@
   --ti-mobile-common-color-link-dark: var(--ti-mobile-base-color-common-2); /* 文本_链接__深色*/
   --ti-mobile-common-color-link-highlight: var(--ti-mobile-base-color-brand-1); /* 文本_链接_高亮色*/
   --ti-mobile-common-color-link-gray: var(--ti-mobile-base-color-common-13); /* 文本_链接_灰色加强*/
-  --ti-mobile-common-color-link-white: var( --ti-mobile-base-color-common-12); /* 文本_链接_白色*/
+  --ti-mobile-common-color-link-white: var(--ti-mobile-base-color-common-12); /* 文本_链接_白色*/
 
   /* 线颜色*/
   --ti-mobile-common-color-line-hightlight: var(--ti-mobile-base-color-brand-1); /* 高亮_描边色*/
-  --ti-mobile-common-color-line-dark: var( --ti-mobile-base-color-common-9); /* 深_描边色*/
-  --ti-mobile-common-color-line-light: var( --ti-mobile-base-color-common-10); /* 浅_描边色*/
+  --ti-mobile-common-color-line-dark: var(--ti-mobile-base-color-common-9); /* 深_描边色*/
+  --ti-mobile-common-color-line-light: var(--ti-mobile-base-color-common-10); /* 浅_描边色*/
 
   /* 蒙层色*/
-  --ti-mobile-common-color-mask-light: rgba(0,0,0,0.5); /* 蒙层_相对浅*/
-  --ti-mobile-common-color-mask-dark: rgba(0,0,0,0.75); /* 蒙层_相对深*/
+  --ti-mobile-common-color-mask-light: rgba(0, 0, 0, 0.5); /* 蒙层_相对浅*/
+  --ti-mobile-common-color-mask-dark: rgba(0, 0, 0, 0.75); /* 蒙层_相对深*/
 
   /* 蒙层色*/
   --ti-mobile-common-bg-color-white: var(--ti-mobile-base-color-bg-3); /* 背景_白*/
   --ti-mobile-common-bg-color-main: var(--ti-mobile-base-color-brand-1); /* 背景_蓝*/
   --ti-mobile-common-bg-color-light: var(--ti-mobile-base-color-bg-2); /* 背景_浅灰*/
+  --ti-mobile-common-bg-color-dark-gray: var(--ti-mobile-base-color-bg-1); /* 背景_深灰*/
 }
diff --git a/src/modal/index.js b/src/modal/index.js
new file mode 100644
index 0000000..37e0888
--- /dev/null
+++ b/src/modal/index.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c 2022 - present TinyVue Authors.
+ * Copyright (c 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+export default {
+  "tiny--mobile-modal-text-font-size": "14px",
+  "tiny--mobile-modal-header-font-size": "16px",
+  "tiny--mobile-modal-text-color": "#191919",
+  "tiny--mobile-modal-alert-font-size": "22px",
+  "tiny--mobile-modal-box-bg-color": "#fff",
+  "tiny--mobile-modal-box-shadow": "0 8px 40px 0 rgba(0, 0, 0, 0.2)",
+  "tiny--mobile-modal-close-btn-top": "13px",
+  "tiny--mobile-modal-close-btn-scale": "scale(1, 1)",
+  "tiny--mobile-modal-close-btn-bg-color-hover": "#fff",
+  "tiny--mobile-modal-btn-width": "112px",
+  "tiny--mobile-modal-single-btn-width": "144px",
+  "tiny--mobile-modal-btn-height": "36px",
+  "tiny--mobile-modal-cancel-btn-bg-color": "#f5f5f5",
+};
diff --git a/src/modal/index.less b/src/modal/index.less
new file mode 100644
index 0000000..39c48c7
--- /dev/null
+++ b/src/modal/index.less
@@ -0,0 +1,516 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+
+@modal-prefix-cls: ~'@{css-prefix}mobile-modal';
+
+@button-default-prefix-cls: ~'@{css-prefix}mobile-button--default';
+@button-prefix-cls: ~'@{css-prefix}mobile-button';
+@button-default-prefix-cls: ~'@{css-prefix}mobile-button--default';
+@button-prefix-cls: ~'@{css-prefix}mobile-button';
+
+.@{modal-prefix-cls}{
+  .component-css-vars-modal();
+}
+
+.@{modal-prefix-cls} {
+  &__wrapper {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    font-size: var(--ti-mobile-modal-text-font-size);
+    color: var(--ti-mobile-modal-text-color);
+    transition: top 0.4s;
+
+    &.active {
+      display: block;
+    }
+
+    &.is__visible {
+      &.is__mask {
+        &:before {
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+      }
+
+      &.type__message {
+        .@{modal-prefix-cls}__box {
+          transform: translateY(0);
+        }
+      }
+
+      &:not(.type__message) {
+        .@{modal-prefix-cls}__box:not(.is__drag) {
+          top: 15vh;
+          transition: top 0s ease-in, opacity 0.4s ease-in;
+        }
+      }
+
+      .@{modal-prefix-cls}__box {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+
+    &:not(.lock__view) {
+      pointer-events: none;
+    }
+
+    &.lock__scroll {
+      overflow: hidden;
+    }
+
+    &:not(.lock__scroll) {
+      overflow: auto;
+    }
+
+    &:not(.type__message) {
+      .@{modal-prefix-cls}__text {
+        font-size: var(--ti-mobile-modal-text-font-size);
+        color: var(--ti-mobile-common-color-text-secondary);
+        line-height: 1.5;
+      }
+    }
+
+    &.lock__view,
+    &.is__mask {
+      &:before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        pointer-events: auto;
+      }
+    }
+
+    &.is__animat {
+      &.is__mask {
+        &:before {
+          transition: background-color, 0.2s, ease-in-out;
+        }
+      }
+
+      &.type__message {
+        .@{modal-prefix-cls}__box {
+          &:not(.is__drag) {
+            transition: all, 0.2s, ease-out;
+          }
+        }
+      }
+    }
+
+    &.size__small,
+    &.size__mini {
+      font-size: var(--ti-mobile-modal-text-font-size);
+
+      .@{modal-prefix-cls}__box {
+        padding: 6px 0;
+      }
+
+      .@{modal-prefix-cls}__body {
+        padding: 4px 14px 10px 14px;
+      }
+
+      .@{modal-prefix-cls}__footer {
+        padding: 4px 14px 8px 14px;
+      }
+
+      .@{modal-prefix-cls}__header {
+        font-size: var(--ti-mobile-modal-header-font-size);
+        padding: 6px 30px 8px 14px;
+      }
+
+      .@{modal-prefix-cls}__zoom-btn,
+      .@{modal-prefix-cls}__close-btn {
+        font-size: var(--ti-mobile-modal-header-font-size);
+        top: 10px;
+      }
+    }
+
+    &.type__message,
+    &.type__alert,
+    &.type__confirm {
+      .@{modal-prefix-cls}__body {
+        white-space: normal;
+        word-break: break-word;
+      }
+    }
+
+    &.type__message {
+      text-align: center;
+
+      .@{modal-prefix-cls}__box {
+        display: inline-block;
+        padding: 24px;
+        margin-top: 0;
+        width: auto;
+        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+        transform: translateY(-10%);
+
+        .@{modal-prefix-cls}__body {
+          &:after {
+            content: '';
+            display: block;
+            clear: both;
+            height: 0;
+            overflow: hidden;
+            visibility: hidden;
+          }
+        }
+
+        .@{modal-prefix-cls}__content {
+          max-width: 800px;
+          float: left;
+        }
+      }
+
+      .@{modal-prefix-cls}__status-wrapper {
+        font-size: var(--ti-mobile-modal-small-btn-font-size);
+        padding-right: 10px;
+      }
+    }
+
+    &.type__modal,
+    &.type__alert,
+    &.type__confirm {
+      .@{modal-prefix-cls}__box {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        left: 50%;
+        top: 0;
+        box-shadow: var(--ti-mobile-modal-box-shadow);
+        border: 1px solid var(--ti-mobile-modal-border-color);
+
+        .@{modal-prefix-cls}__header {
+          cursor: move;
+        }
+      }
+    }
+
+    &.type__modal {
+      .@{modal-prefix-cls}__body {
+        overflow: auto;
+
+        .@{modal-prefix-cls}__content {
+          overflow: auto;
+        }
+      }
+    }
+
+    &.type__alert,
+    &.type__confirm {
+      .@{modal-prefix-cls}__status-wrapper {
+        font-size: var(--ti-mobile-modal-alert-font-size);
+        padding: 0 10px 0 2px;
+      }
+    }
+
+    &.is__maximize {
+      .@{modal-prefix-cls}__box {
+        .@{modal-prefix-cls}__header {
+          cursor: default;
+        }
+      }
+
+      .@{modal-prefix-cls}__resize {
+        .wl-resize,
+        .wr-resize,
+        .swst-resize,
+        .sest-resize,
+        .st-resize,
+        .swlb-resize,
+        .selb-resize,
+        .sb-resize {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &__box {
+    width: 90%;
+    background-color: var(--ti-mobile-modal-box-bg-color);
+    border-radius: 16px;
+    font-size: var(--ti-mobile-modal-header-font-size);
+    box-shadow: var(--ti-mobile-modal-box-shadow);
+    text-align: left;
+    pointer-events: auto;
+    visibility: hidden;
+    opacity: 0;
+    padding-top: 12px;
+
+
+    &.is__drag {
+      cursor: move;
+
+      .@{modal-prefix-cls}__body,
+      .@{modal-prefix-cls}__footer {
+        &:after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .@{modal-prefix-cls}__body {
+        overflow: hidden;
+
+        .@{modal-prefix-cls}__content {
+          overflow: hidden;
+        }
+      }
+    }
+  }
+
+  &__status-wrapper {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  &__status-icon {
+    font-style: normal;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    flex-grow: 1;
+  }
+
+  &__header,
+  &__body,
+  &__footer {
+    position: relative;
+  }
+
+  &__body {
+    display: flex;
+    flex-grow: 1;
+    padding: 20px 44px 28px 44px;
+  }
+
+  &__header {
+    flex-shrink: 0;
+    color: var(--ti-mobile-modal-text-color);
+    font-size: var(--ti-mobile-modal-header-font-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    border-bottom: none;
+    padding: 20px 44px 0px 44px;
+    user-select: none;
+  }
+
+  &__zoom-btn,
+  &__close-btn {
+    font-size: var(--ti-mobile-modal-header-font-size);
+    position: absolute;
+    right: 24px;
+    top: var(--ti-mobile-modal-close-btn-top);
+    z-index: 1;
+    fill: var(--ti-mobile-modal-text-color);
+    transform: var(--ti-mobile-modal-close-btn-scale);
+    cursor: pointer;
+    padding: 0;
+    border-radius: 4px;
+
+    &:hover {
+      fill: var(--ti-mobile-modal-text-color);
+      background-color:var(--ti-mobile-modal-close-btn-bg-color-hover)
+    }
+  }
+
+  &__zoom-btn {
+    right: 44px;
+    border-color: #c0c4cc;
+
+    &:hover {
+      border-color: #606266;
+    }
+  }
+
+  &__footer {
+    flex-shrink: 0;
+    text-align: center;
+    padding-bottom: 32px;
+
+    .@{button-prefix-cls}{
+      border-radius: 18px;
+      width: var(--ti-mobile-modal-btn-width);
+      height: var(--ti-mobile-modal-btn-height);
+      line-height: var(--ti-mobile-modal-btn-height);
+
+      &__single {
+        width: var(--ti-mobile-modal-single-btn-width);
+      }
+    }
+    .@{button-default-prefix-cls}{
+      display: inline-block;
+      margin-right: 16px;
+      background-color: var(--ti-mobile-modal-cancel-btn-bg-color, #f5f5f5);
+      border: none;
+      color: var(--ti-mobile-modal-text-color);
+    }
+  }
+
+  &__resize {
+    @SpaceSize: 8px;
+
+    .wl-resize,
+    .wr-resize,
+    .swst-resize,
+    .sest-resize,
+    .st-resize,
+    .swlb-resize,
+    .selb-resize,
+    .sb-resize {
+      position: absolute;
+      z-index: 100;
+    }
+
+    .wl-resize,
+    .wr-resize {
+      width: @SpaceSize;
+      height: 100%;
+      top: 0;
+      cursor: w-resize;
+    }
+
+    .wl-resize {
+      left: -@SpaceSize / 2 + 1;
+    }
+
+    .wr-resize {
+      right: -@SpaceSize / 2 + 1;
+    }
+
+    .swst-resize,
+    .sest-resize,
+    .swlb-resize,
+    .selb-resize {
+      width: @SpaceSize + 2;
+      height: @SpaceSize + 2;
+      z-index: 101;
+    }
+
+    .swst-resize,
+    .sest-resize {
+      top: -@SpaceSize;
+    }
+
+    .swlb-resize,
+    .selb-resize {
+      bottom: -@SpaceSize;
+    }
+
+    .sest-resize,
+    .swlb-resize {
+      cursor: sw-resize;
+    }
+
+    .swst-resize,
+    .selb-resize {
+      cursor: se-resize;
+    }
+
+    .swst-resize,
+    .swlb-resize {
+      left: -@SpaceSize;
+    }
+
+    .sest-resize,
+    .selb-resize {
+      right: -@SpaceSize;
+    }
+
+    .st-resize,
+    .sb-resize {
+      width: 100%;
+      height: @SpaceSize;
+      left: 0;
+      cursor: s-resize;
+    }
+
+    .st-resize {
+      top: -@SpaceSize / 2 + 1;
+    }
+
+    .sb-resize {
+      bottom: -@SpaceSize / 2 + 1;
+    }
+  }
+}
+
+@keyframes modal-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes modal-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes modal-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes modal-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/modal/vars.less b/src/modal/vars.less
new file mode 100644
index 0000000..e5fdb5e
--- /dev/null
+++ b/src/modal/vars.less
@@ -0,0 +1,27 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.component-css-vars-modal() {
+  --ti-mobile-modal-text-font-size: 14px;
+  --ti-mobile-modal-header-font-size: 16px;
+  --ti-mobile-modal-text-color: var(--ti-mobile-common-color-text-primary, #191919);
+  --ti-mobile-modal-alert-font-size: 22px;
+  --ti-mobile-modal-box-bg-color: var(--ti-mobile-common-bg-color-white, #fff);
+  --ti-mobile-modal-box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.2);
+  --ti-mobile-modal-close-btn-top: 13px;
+  --ti-mobile-modal-close-btn-scale: scale(1, 1);
+  --ti-mobile-modal-close-btn-bg-color-hover: var(--ti-mobile-common-bg-color-white, #fff);
+  --ti-mobile-modal-btn-width: 112px;
+  --ti-mobile-modal-single-btn-width: 144px;
+  --ti-mobile-modal-btn-height: 36px;
+  --ti-mobile-modal-cancel-btn-bg-color: var(--ti-mobile-common-bg-color-dark-gray, #f5f5f5);
+}