diff --git a/packages/mixins/popup/index.js b/packages/mixins/popup/index.js
index 208833abd..38c69e677 100644
--- a/packages/mixins/popup/index.js
+++ b/packages/mixins/popup/index.js
@@ -28,6 +28,16 @@ export default {
     preventScroll: {
       type: Boolean,
       default: false
+    },
+    // 遮罩层额外样式
+    overlayStyle: {
+      type: String,
+      default: ''
+    },
+    // 遮罩层额外类
+    overlayClass: {
+      type: String,
+      default: ''
     }
   },
 
@@ -98,7 +108,13 @@ export default {
       }
 
       if (this.overlay) {
-        manager.openModal(this._popupId, context.plusKeyByOne('zIndex'), this.$el);
+        manager.openModal({
+          id: this._popupId,
+          zIndex: context.plusKeyByOne('zIndex'),
+          dom: this.$el,
+          extraClass: this.overlayClass,
+          extraStyle: this.overlayStyle
+        });
         if (this.lockOnScroll) {
           document.body.classList.add('van-overflow-hidden');
         }
diff --git a/packages/mixins/popup/popup-manager.js b/packages/mixins/popup/popup-manager.js
index 62ebc8c6c..dda1bceeb 100644
--- a/packages/mixins/popup/popup-manager.js
+++ b/packages/mixins/popup/popup-manager.js
@@ -32,12 +32,18 @@ const PopupManager = {
     }
   },
 
-  openModal(id, zIndex, dom) {
+  openModal({id, zIndex, dom, extraClass, extraStyle}) {
     const { modalStack } = context;
     const exist = modalStack.some(item => item.id === id);
 
     if (!exist) {
       const modal = this.getModal();
+      if (extraClass) {
+        modal.classList.add(extraClass);
+      }
+      if (extraStyle) {
+        modal.style.cssText = `${modal.style.cssText} ${extraStyle}`;
+      }
       modal.style.zIndex = zIndex;
 
       const parentNode = dom && dom.parentNode && dom.parentNode.nodeType !== 11 ? dom.parentNode : document.body;