diff --git a/style/mobile/components/overlay/_index.less b/style/mobile/components/overlay/_index.less
index f496e3470f..4c38d59057 100644
--- a/style/mobile/components/overlay/_index.less
+++ b/style/mobile/components/overlay/_index.less
@@ -8,15 +8,11 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: @overlay-z-index;
-  display: block;
+  bottom: 0;
   width: 100%;
-  height: 100%;
-  background-color: @mask-bg-color;
-
-  &--transparent {
-    background-color: transparent;
-  }
+  z-index: @overlay-zindex;
+  background-color: @overlay-bg-color;
+  transition-duration: @overlay-transition-duration;
 
   &-enter-from,
   &-leave-to {
@@ -28,18 +24,4 @@
     transition-property: background-color;
     transition-timing-function: ease;
   }
-
-  &-aria-button {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  &-content {
-    z-index: 1;
-  }
 }
diff --git a/style/mobile/components/overlay/_var.less b/style/mobile/components/overlay/_var.less
index 17c9686add..287dbdc10c 100644
--- a/style/mobile/components/overlay/_var.less
+++ b/style/mobile/components/overlay/_var.less
@@ -1,2 +1,3 @@
-@overlay-z-index: 1500;
-@mask-bg-color:rgba(0, 0, 0, .6);
+@overlay-zindex: var(--td-overlay-zindex, 1000);
+@overlay-bg-color: var(--td-overlay-bg-color, @font-gray-2);
+@overlay-transition-duration: var(--td-overlay-transition-duration, 300ms);
diff --git a/style/mobile/components/popup/_index.less b/style/mobile/components/popup/_index.less
index 9bd49e1965..58c9464782 100644
--- a/style/mobile/components/popup/_index.less
+++ b/style/mobile/components/popup/_index.less
@@ -7,7 +7,7 @@
 .@{prefix}-popup {
   &--content {
     position: fixed;
-    z-index: @overlay-z-index;
+    z-index: 1500;
   }
 
   &--content-top {