[improvement] Dialog: add z-index prop (#573)

dist/dialog/dialog.js

@@ -23,6 +23,7 @@ Dialog.defaultOptions = {
   show: true,
   title: '',
   message: '',
+  zIndex: 100,
   overlay: true,
   asyncClose: false,
   selector: '#van-dialog',

dist/dialog/index.js

@@ -21,6 +21,10 @@ create({
         }
       }
     },
+    zIndex: {
+      type: Number,
+      value: 100
+    },
     confirmButtonText: {
       type: String,
       value: '确认'

dist/dialog/index.wxml

@@ -1,6 +1,7 @@
 <van-popup
   show="{{ show }}"
   transition="scale"
+  z-index="{{ zIndex }}"
   overlay="{{ overlay }}"
   close-on-click-overlay="{{ closeOnClickOverlay }}"
   custom-class="van-dialog"

dist/popup/index.js

@@ -7,6 +7,10 @@ create({
   props: {
     transition: String,
     overlayStyle: String,
+    zIndex: {
+      type: Number,
+      value: 100
+    },
     overlay: {
       type: Boolean,
       value: true

dist/popup/index.wxml

@@ -1,13 +1,14 @@
 <van-overlay
   mask
   show="{{ overlay && show }}"
+  z-index="{{ zIndex }}"
   custom-style="{{ overlayStyle }}"
   bind:click="onClickOverlay"
 />
 <view
   wx:if="{{ inited }}"
   class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }}"
-  style="animation-name: van-{{ transition || position }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }}"
+  style="z-index: {{ zIndex }}; animation-name: van-{{ transition || position }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }}"
   bind:animationend="onAnimationEnd"
 >
   <slot />

dist/popup/index.wxss

@@ -1 +1 @@
-.van-popup{top:50%;left:50%;z-index:11;position:fixed;max-height:100%;overflow-y:auto;box-sizing:border-box;background-color:#fff;-webkit-overflow-scrolling:touch;-webkit-animation:ease both;animation:ease both}.van-popup--center{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%}.van-popup--right{top:50%;right:0;bottom:auto;left:auto}.van-popup--bottom{width:100%;top:auto;bottom:0;right:auto;left:50%}.van-popup--left{top:50%;right:auto;bottom:auto;left:0}@-webkit-keyframes van-center-enter{from{opacity:0}}@keyframes van-center-enter{from{opacity:0}}@-webkit-keyframes van-center-leave{to{opacity:0}}@keyframes van-center-leave{to{opacity:0}}@-webkit-keyframes van-scale-enter{from{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@keyframes van-scale-enter{from{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@-webkit-keyframes van-scale-leave{to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@keyframes van-scale-leave{to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@-webkit-keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@-webkit-keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@-webkit-keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@-webkit-keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}@keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}
+.van-popup{top:50%;left:50%;position:fixed;max-height:100%;overflow-y:auto;box-sizing:border-box;background-color:#fff;-webkit-overflow-scrolling:touch;-webkit-animation:ease both;animation:ease both}.van-popup--center{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup--top{width:100%;top:0;right:auto;bottom:auto;left:50%}.van-popup--right{top:50%;right:0;bottom:auto;left:auto}.van-popup--bottom{width:100%;top:auto;bottom:0;right:auto;left:50%}.van-popup--left{top:50%;right:auto;bottom:auto;left:0}@-webkit-keyframes van-center-enter{from{opacity:0}}@keyframes van-center-enter{from{opacity:0}}@-webkit-keyframes van-center-leave{to{opacity:0}}@keyframes van-center-leave{to{opacity:0}}@-webkit-keyframes van-scale-enter{from{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@keyframes van-scale-enter{from{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@-webkit-keyframes van-scale-leave{to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@keyframes van-scale-leave{to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}}@-webkit-keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-bottom-enter{from{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@keyframes van-bottom-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}}@-webkit-keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes van-top-enter{from{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@keyframes van-top-leave{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}}@-webkit-keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-left-enter{from{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@keyframes van-left-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}}@-webkit-keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@keyframes van-right-enter{from{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}to{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}}@-webkit-keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}@keyframes van-right-leave{from{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}}

packages/dialog/README.md

@@ -124,6 +124,7 @@ Page({
 |-----------|-----------|-----------|-------------|
 | title | 标题 | `String` | - |
 | message | 内容 | `String` | - |
+| zIndex | z-index 层级 | `Number` | `100` |
 | selector | 自定义选择器 | `String` | `van-dialog` |
 | showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` |
 | showCancelButton | 是否展示取消按钮 | `Boolean` | `false` |
@@ -143,6 +144,7 @@ Page({
 | show | 是否显示弹窗 | `Boolean` | - |
 | title | 标题 | `String` | - |
 | message | 内容 | `String` | - |
+| z-index | z-index 层级 | `Number` | `100` |
 | show-confirm-button | 是否展示确认按钮 | `Boolean` |  `true` |
 | show-cancel-button | 是否展示取消按钮 | `Boolean` |  `false` |
 | confirm-button-text | 确认按钮的文案 | `String` |  `确认` |

packages/dialog/dialog.js

@@ -23,6 +23,7 @@ Dialog.defaultOptions = {
   show: true,
   title: '',
   message: '',
+  zIndex: 100,
   overlay: true,
   asyncClose: false,
   selector: '#van-dialog',

packages/dialog/index.js

@@ -21,6 +21,10 @@ create({
         }
       }
     },
+    zIndex: {
+      type: Number,
+      value: 100
+    },
     confirmButtonText: {
       type: String,
       value: '确认'

packages/dialog/index.wxml

@@ -1,6 +1,7 @@
 <van-popup
   show="{{ show }}"
   transition="scale"
+  z-index="{{ zIndex }}"
   overlay="{{ overlay }}"
   close-on-click-overlay="{{ closeOnClickOverlay }}"
   custom-class="van-dialog"