From 9954caa2a826c251025baf64bf0f94e72da51a79 Mon Sep 17 00:00:00 2001
From: gausszhou <gausszhou@qq.com>
Date: Fri, 19 Dec 2025 00:26:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(modal):=20=E4=BF=AE=E5=A4=8D=20modal=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8=20alert,=20confirm=20=E7=9A=84?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=9C=BA=E6=99=AF=E4=B8=8B=20top=20=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/demos/apis/modal.js            |  6 +++---
 .../sites/demos/pc/app/modal/message-top.vue  | 20 +++++++++++++++++--
 .../sites/demos/pc/app/modal/webdoc/modal.js  |  6 +++---
 packages/renderless/src/modal/index.ts        |  7 ++++++-
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/examples/sites/demos/apis/modal.js b/examples/sites/demos/apis/modal.js
index 22b4567d48..af20897aff 100644
--- a/examples/sites/demos/apis/modal.js
+++ b/examples/sites/demos/apis/modal.js
@@ -379,10 +379,10 @@ export default {
         {
           name: 'top',
           type: 'number | string',
-          defaultValue: '80',
+          defaultValue: '80px',
           desc: {
-            'zh-CN': "消息距离顶部的位置，仅当 type 为 'message' 时有效",
-            'en-US': "The position of the message from the top, only valid when type is 'message'"
+            'zh-CN': '模态框距离顶部的位置',
+            'en-US': 'The position of the modal from the top'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'message-top',
diff --git a/examples/sites/demos/pc/app/modal/message-top.vue b/examples/sites/demos/pc/app/modal/message-top.vue
index fb34dc3674..7d82d36ef9 100644
--- a/examples/sites/demos/pc/app/modal/message-top.vue
+++ b/examples/sites/demos/pc/app/modal/message-top.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="content">
-      <tiny-button @click="btnClick">消息距离顶部 500px</tiny-button>
+      <tiny-button @click="btnClick1">提示弹窗距离顶部 300px</tiny-button>
+      <tiny-button @click="btnClick2">确认弹窗距离顶部 50vh</tiny-button>
+      <tiny-button @click="btnClick3">消息距离顶部 500px</tiny-button>
     </div>
   </div>
 </template>
@@ -14,7 +16,21 @@ export default {
     TinyButton: Button
   },
   methods: {
-    btnClick() {
+    btnClick1() {
+      Modal.alert({
+        status: 'info',
+        message: '提示弹窗距离顶部 300px',
+        top: 300
+      })
+    },
+    btnClick2() {
+      Modal.confirm({
+        status: 'info',
+        message: '确认弹窗距离顶部 50vh',
+        top: '50vh'
+      })
+    },
+    btnClick3() {
       Modal.message({
         status: 'info',
         message: '自定义消息的内容距离顶部 500px',
diff --git a/examples/sites/demos/pc/app/modal/webdoc/modal.js b/examples/sites/demos/pc/app/modal/webdoc/modal.js
index c0e32d961c..7a618fcb3b 100644
--- a/examples/sites/demos/pc/app/modal/webdoc/modal.js
+++ b/examples/sites/demos/pc/app/modal/webdoc/modal.js
@@ -301,12 +301,12 @@ export default {
     {
       demoId: 'message-top',
       name: {
-        'zh-CN': '消息距离顶部位置',
+        'zh-CN': '模态框距离顶部位置',
         'en-US': 'Position from top'
       },
       desc: {
-        'zh-CN': '通过<code>top</code>属性设置消息距离顶部的位置，单位为 px',
-        'en-US': `Use the <code>top</code> property to set the distance from the top of the message in units of px. `
+        'zh-CN': '通过<code>top</code>属性设置模态框距离顶部的位置',
+        'en-US': 'Use the <code>top</code> property to set the distance from the top of the modal.'
       },
       codeFiles: ['message-top.vue']
     },
diff --git a/packages/renderless/src/modal/index.ts b/packages/renderless/src/modal/index.ts
index ff56aa19a3..7b00875ae2 100644
--- a/packages/renderless/src/modal/index.ts
+++ b/packages/renderless/src/modal/index.ts
@@ -61,9 +61,14 @@ export const computedBoxStyle =
       return {}
     }
 
+    let top = ''
     let width: string | number = ''
     let height: string | number = ''
 
+    if (props.type === 'alert' || props.type === 'confirm') {
+      top = typeof props.top === 'number' ? `${props.top}px` : props.top
+    }
+
     if (props.width) {
       width = isNaN(props.width as number) ? props.width : `${props.width}px`
     }
@@ -72,7 +77,7 @@ export const computedBoxStyle =
       height = isNaN(props.height as number) ? props.height : `${props.height}px`
     }
 
-    return { width, height }
+    return { top, width, height }
   }
 
 export const watchValue =