小程序弹窗口，有基本的  wx.showToast ，可是这个只是相当于一个平常的高级版的 alert， 其中并不能携带很多信息，或进行很多的交互。

 

如果业务要求，需要一个比较复杂的弹框提醒，或者需要一个弹框出来一个form 来填写一些信息进行提交的话，显然 wx.showToast 就不足以完成我们的需求了。

 

此时需要的是充分利用，小程序的 wx:if ，eg:  <view wx:if="{

{showMask}}"></view> ，来控制遮罩层是否出现。其余的就是页面呈现的事情了。

 

ps: 虽然有遮罩层，不过由于事件的冒泡，会导致，拖动的时候，遮罩层被拖动，所以需要在所有蒙版层把touchmove事件catch住，停止其向上冒泡。在小程序中使用  catchtouchmove  属性， eg:  catchtouchmove="onPreventTouchMove" 

 

至此，小程序弹窗就可以完美的呈现了。

 

实例如下：

index.wxml

         
          
              
                   
        
         弹窗成功
                    
        
         顺利弹出窗口！
                
               
       
        确定
           
      
     

 

index.wxss

/* 遮罩的样式 */.mask-view {
       top: 0;    left: 0;    position: fixed;    opacity: 0.5;    background-color: #000;    width: 100%;    height: 100%;}.popup-view {
       position: fixed;    background-color: #fff;    border-radius: 12rpx;    left: 60rpx;    top: 237rpx;    width: 630rpx;    height: 630rpx;    text-align: center;}.popup-content-view {
       margin: 0 63rpx 0 63rpx;}.hint-title-text {
       display: block;    color: #000;    font-size: 36rpx;    font-weight: 500;    margin-bottom: 55rpx;}.hint-content-text {
       display: block;    color: #555;    font-size: 30rpx;    text-align: left;}.confirm-button-text {
       display: block;    position: absolute;    width: 100%;    left: 0;    bottom: 0;    font-size: 36rpx;    height: 100rpx;    line-height: 100rpx;    font-weight: 500;    border-top: 1rpx solid #b5b5b5;}