第一步：点击按钮触发弹窗事件

<button class="btn" bindtap="btn">按钮</button>

*** css样式

.btn{

    position: fixed;

    bottom: 0;

    left: 0;

}

*** js

btn(){

    let delshow = !this.data.delshow

    console.log(delshow)

    this.setData({

      delshow

    })

  },

第二步：设置弹窗的宽高为100%

  <view class="message" wx:if="{{delshow}}" bindtap="print"></view>

*** css样式

.message{

    height: 100%;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.3);

    position: fixed;

    top: 0;

    z-index: 30;

}

*** js

print(){

    this.setData({

      delshow : false

    })

  },

第三步：给内容的弹窗设置样式。

<view class="msg {{delshow ? 'box' : ''}}"> 弹窗中的内容 </view>

.container .msg{

    height: 0;

    width: 100%;

    background-color: #fff;

    position: fixed;

    z-index: 40;

    bottom: 0;

    overflow: hidden;

    transition: all 0.3s;

    z-index: 30;

}

//弹窗内容

.container .box{

    height: 1000rpx;

}

最后：微信小程序简单的弹窗功能实现了。