diff --git a/packages/vant/src/popup/README.md b/packages/vant/src/popup/README.md
index 3e311736c..338d30aa8 100644
--- a/packages/vant/src/popup/README.md
+++ b/packages/vant/src/popup/README.md
@@ -44,10 +44,37 @@ export default {
 
 ### Position
 
-Use `position` prop to set popup display position.
+Use `position` prop to set Popup display position.
+
+The default position is `center`, it can be set to `top`, `bottom`, `left`, `right`.
+
+- When the position is `top` or `bottom`, the default width is consistent with the screen width, and the height of the Popup depends on the height of the content.
+- When the position is `left` or `right` side, the width and height are not set by default, and the width and height of the popup depend on the width and height of the content.
 
 ```html
-<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
+<!-- top popup -->
+<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />
+
+<!-- bottom popup -->
+<van-popup
+  v-model:show="showBottom"
+  position="bottom"
+  :style="{ height: '30%' }"
+/>
+
+<!-- left popup -->
+<van-popup
+  v-model:show="showLeft"
+  position="left"
+  :style="{ width: '30%', height: '100%' }"
+/>
+
+<!-- Popup on the right -->
+<van-popup
+  v-model:show="showRight"
+  position="right"
+  :style="{ width: '30%', height: '100%' }"
+/>
 ```
 
 ### Close Icon
diff --git a/packages/vant/src/popup/README.zh-CN.md b/packages/vant/src/popup/README.zh-CN.md
index ff2a37d79..eb92b3109 100644
--- a/packages/vant/src/popup/README.zh-CN.md
+++ b/packages/vant/src/popup/README.zh-CN.md
@@ -46,10 +46,35 @@ export default {
 
 ### 弹出位置
 
-通过 `position` 属性设置弹出位置，默认居中弹出，可以设置为 `top`、`bottom`、`left`、`right`。
+通过 `position` 属性设置弹窗的弹出位置，默认为居中弹出，可以设置为 `top`、`bottom`、`left`、`right`。
+
+- 当弹窗从顶部或底部弹出时，默认宽度与屏幕宽度保持一致，弹窗高度取决于内容的高度。
+- 当弹窗从左侧或右侧弹出时，默认不设置宽度和高度，弹窗的宽高取决于内容的宽高。
 
 ```html
-<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
+<!-- 顶部弹出 -->
+<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />
+
+<!-- 底部弹出 -->
+<van-popup
+  v-model:show="showBottom"
+  position="bottom"
+  :style="{ height: '30%' }"
+/>
+
+<!-- 左侧弹出 -->
+<van-popup
+  v-model:show="showLeft"
+  position="left"
+  :style="{ width: '30%', height: '100%' }"
+/>
+
+<!-- 右侧弹出 -->
+<van-popup
+  v-model:show="showRight"
+  position="right"
+  :style="{ width: '30%', height: '100%' }"
+/>
 ```
 
 ### 关闭图标
diff --git a/packages/vant/src/popup/demo/index.vue b/packages/vant/src/popup/demo/index.vue
index 3de32134a..d8b30b4d4 100644
--- a/packages/vant/src/popup/demo/index.vue
+++ b/packages/vant/src/popup/demo/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import VanCell from '../../cell';
 import VanPopup from '..';
+import VanGrid from '../../grid';
+import VanGridItem from '../../grid-item';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
 
@@ -54,10 +56,28 @@ const showCustomIconPosition = ref(false);
   </demo-block>
 
   <demo-block card :title="t('position')">
-    <van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
-    <van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
-    <van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
-    <van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
+    <van-grid clickable>
+      <van-grid-item
+        icon="arrow-up"
+        :text="t('buttonTop')"
+        @click="showTop = true"
+      />
+      <van-grid-item
+        icon="arrow-down"
+        :text="t('buttonBottom')"
+        @click="showBottom = true"
+      />
+      <van-grid-item
+        icon="arrow-left"
+        :text="t('buttonLeft')"
+        @click="showLeft = true"
+      />
+      <van-grid-item
+        icon="arrow"
+        :text="t('buttonRight')"
+        @click="showRight = true"
+      />
+    </van-grid>
 
     <van-popup
       v-model:show="showTop"
diff --git a/packages/vant/src/popup/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/popup/test/__snapshots__/demo.spec.ts.snap
index 2f90c8a92..cb9dc9760 100644
--- a/packages/vant/src/popup/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/popup/test/__snapshots__/demo.spec.ts.snap
@@ -30,53 +30,63 @@ exports[`should render demo and match snapshot 1`] = `
   </transition-stub>
 </div>
 <div>
-  <div class="van-cell van-cell--clickable"
-       role="button"
-       tabindex="0"
-  >
-    <div class="van-cell__title">
-      <span>
-        From Top
-      </span>
+  <div class="van-grid van-hairline--top">
+    <div class="van-grid-item"
+         style="flex-basis: 25%;"
+    >
+      <div role="button"
+           class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
+           tabindex="0"
+      >
+        <i class="van-badge__wrapper van-icon van-icon-arrow-up van-grid-item__icon">
+        </i>
+        <span class="van-grid-item__text">
+          From Top
+        </span>
+      </div>
     </div>
-    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-    </i>
-  </div>
-  <div class="van-cell van-cell--clickable"
-       role="button"
-       tabindex="0"
-  >
-    <div class="van-cell__title">
-      <span>
-        From Bottom
-      </span>
+    <div class="van-grid-item"
+         style="flex-basis: 25%;"
+    >
+      <div role="button"
+           class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
+           tabindex="0"
+      >
+        <i class="van-badge__wrapper van-icon van-icon-arrow-down van-grid-item__icon">
+        </i>
+        <span class="van-grid-item__text">
+          From Bottom
+        </span>
+      </div>
     </div>
-    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-    </i>
-  </div>
-  <div class="van-cell van-cell--clickable"
-       role="button"
-       tabindex="0"
-  >
-    <div class="van-cell__title">
-      <span>
-        From Left
-      </span>
+    <div class="van-grid-item"
+         style="flex-basis: 25%;"
+    >
+      <div role="button"
+           class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
+           tabindex="0"
+      >
+        <i class="van-badge__wrapper van-icon van-icon-arrow-left van-grid-item__icon">
+        </i>
+        <span class="van-grid-item__text">
+          From Left
+        </span>
+      </div>
     </div>
-    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-    </i>
-  </div>
-  <div class="van-cell van-cell--clickable"
-       role="button"
-       tabindex="0"
-  >
-    <div class="van-cell__title">
-      <span>
-        From Right
-      </span>
+    <div class="van-grid-item"
+         style="flex-basis: 25%;"
+    >
+      <div role="button"
+           class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"
+           tabindex="0"
+      >
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-grid-item__icon">
+        </i>
+        <span class="van-grid-item__text">
+          From Right
+        </span>
+      </div>
     </div>
-    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-    </i>
   </div>
   <transition-stub name="van-fade"
                    appear="true"