diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index 2a1049078..8fc181920 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -35,6 +35,13 @@ export default {
         }, 2000);
       }
     }
+  },
+
+  methods: {
+    handlePopupButtonClick() {
+      this.popupShow1 = false;
+      this.popupShow4 = true;
+    }
   }
 };
 </script>
@@ -49,7 +56,7 @@ export default {
   <zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
 </div>
 <zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
-  <zan-button @click="popupShow4 = true" type="primary">从中间弹出popup</zan-button>
+  <zan-button @click="handlePopupButtonClick" type="primary">从中间弹出popup</zan-button>
 </zan-popup>
 
 <div class="zan-row">
@@ -69,6 +76,9 @@ export default {
 <div class="zan-row">
   <zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
 </div>
+<zan-popup v-model="popupShow4" class="zan-popup-4">
+  从中间弹出popup
+</zan-popup>
 
 <script>
 export default {
diff --git a/packages/zanui-css/src/popup.css b/packages/zanui-css/src/popup.css
index 6f478f087..b62ad788b 100644
--- a/packages/zanui-css/src/popup.css
+++ b/packages/zanui-css/src/popup.css
@@ -18,6 +18,7 @@
     transition: .2s ease-out;
 
     @m top {
+      width: 100%;
       top: 0;
       right: auto;
       bottom: auto;
@@ -34,6 +35,7 @@
     }
 
     @m bottom {
+      width: 100%;
       top: auto;
       bottom: 0;
       right: auto;