微信小程序实现漂亮的弹窗效果


            最近项目里需要实现一个带着logo的美美哒弹窗，可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西…… 

场面一度十分尴尬 

可是得做啊，要不然产品大姐又要暴走了…… 

好吧，来研究一下模态对话框的性质自己DIY吧~

实现思路

模态对话框之所以被叫做“模态”，就是因为在它弹出的时候，用户如果不关闭这个对话框，是无法对其他窗口进行操作的。 

那么这样一来，我们的思路就很明确了： 



1. 构建一个蒙层（mask），使得背景变暗，并且阻止用户对对话框外界面的这里写代码片点击事件； 

2. 构建一个对话框，在需要时弹出即可（弹出同时触发蒙层）。

示例代码

.wxml：





<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>



<view class="modalDlg" wx:if="{{showModal}}">

  <image src="/figures/logo-smile.png"/>

  <text>欢迎来到模态对话框~</text>

  <button bindtap="go">点我可以关掉对话框</button>

</view>



<button bindtap="submit">点我弹窗</button>



.wxss：





.mask{

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  background: #000;

  z-index: 9000;

  opacity: 0.7;

}



.modalDlg{

  width: 580rpx;

  height: 620rpx;

  position: fixed;

  top: 50%;

  left: 0;

  z-index: 9999;

  margin: -370rpx 85rpx;

  background-color: #fff;

  border-radius: 36rpx;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.js：





Page({



  data: {

    showModal: false

  },



  submit: function() {

    this.setData({

    showModal: true

    })

  },



  preventTouchMove: function() {



  },





  go: function() { 

    this.setData({

    showModal: false

    })

  }



})



需要注意的地方



  蒙层view中绑定的preventTouchMove函数是一个空函数，使用了catch事件，目的就是阻止touchmove这样一个冒泡事件继续向下传递。

  蒙层的wxss样式中，指定其大小为100%以占满整个屏幕。

  模态对话框与蒙层的wxss样式中均有z-index属性，为的是保证对话框始终浮在蒙层的上方（即对话框的z-index始终要比蒙层的大）



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。