微信小程序自定义弹窗功能实现_微信小程序 自定义弹窗

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函数