wxss:
.pop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1100;
opacity: 0;
background: rgba(10, 10, 10, 0.6);
pointer-events: none;
display: flex;
justify-content: flex-end;
}
.show {
opacity: 1;
pointer-events: auto;
}
.panel {
background-color: #f8f8f8;
border-radius: 10rpx;
flex-basis: 60%
}
z-index: 1100;可以理解为在原页面上新建了一个图层,
position: fixed; top: 0; right: 0; bottom: 0; left: 0;表示这个新的图层在页面上的位置,这里设置为铺满整个页面,
opacity表示不透明度,为0时显示不出来,大于0就可以显示出来
background表示背景颜色
display: flex;justify-content: flex-end;表示右对齐
pointer-events: none;表示新的图层的任何点击事件失效,
flex-basis 指定了 flex 元素在主轴方向上的初始大小
pop类可以理解为在原页面上又覆盖了一层页面,但这个页面是看不到也不能点击
js:
showModal() {
this.setData({
show:true
})
},
hideModal() {
this.setData({
show:false
})
},
调用 showModal函数打开弹窗,调用hideModal函数关闭弹窗
wxml
<view class="pop {{show==true?'show':''}}" bindtap="hideModal">
<view class="panel" catchtap ></view>
</view>
<button bindtap="showModal">弹窗</button>
在页面上创建一个按钮,点击触发弹窗函数,点击黑色区域关闭弹窗;
最终效果:
catchtap表示当前元素内的点击操作不会影响其他元素,即在白色区域内点击不会触发hideModal函数