微信小程序之弹窗布局

效果：

如何实现呢？

首先我们创建个view

wxml代码：

<view class="pop_root">
  <view class="pop_content">
    <view>授权登录</view>
    <button>授权登录</button>
  </view>
</view>

wxss代码：

.pop_root{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0,0.6)
}

.pop_content{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  height: 300rpx;
}

很简单，全屏遮掩后加点透明度，跑一下看看效果吧。