小程序底部弹窗css_小程序的弹窗浮层实现

首先我们要在想要弹窗的页面上写下它的wxml，

<!-- 浮层 -->
 <view class="b1" hidden="{
    {flag}}">
   <view class="b2">
    <image src='http://www.90rs.cn/zb_users/upload/2019/04/201904112207581618699.jpg' />
    </view>
     <view class="t_w">
        <cover-view class="t_image" bindtap="closeMask">
          <cover-image src="/images/icon/xx.png"></cover-image>
        </cover-view>
     </view>
 </view>

这里用到小程序hidden属性，如果flag为true它就隐藏，跟Vue.js的v-show类似，这样写完后我们来添加一些样式，让他更像一个浮层（一般用于领取购物卷，抽奖等）；

/* 设置背景遮罩层样式 */

.b1 {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 background: rgba(0, 0, 0, 0.8);
 display: flex;
 justify-content: cent