微信小程序自定义弹出框_微信小程序弹框

网上搜了一下感觉都没有好用的自定义弹框就自己手写了一个,方便以后CV

弹框可以点击按钮关闭，也可以点击空白关闭

代码很简单

wxml

<view bindtap="submit">点击显示</view>
<view class="mask" bindtap="preventTouchMove" wx:if="{
  {showModal}}"></view>
 
<view class="mask1" wx:if="{
  {showModal}}">
  <view class="modalDlg">
    <view style="height: 500rpx;"></view>
    <button bindtap="showHide">点我可以关掉对话框</button>
</view>
</view>

wxss

.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
}
.mask1{
  position: absolute;
  width: 100%;
  top: 20%;
}
 
.modalDlg{
    position: relative;
    z-index: 9999;
    height: 700rpx;
    background-color: white;
    border-radius: 36rpx;
}

js