小程序-实现弹窗的教程

云小米

上示例：
//popup-center的表示居中弹窗<view wx:if="{{ShowAuthM}}" class="popup"><view class="popup-body"><view class="popup-center" style="background-color:#fff;border-radius:12rpx;"><view class="fui-cell-group" style="padding:40rpx 20rpx;padding-top:0"><view class="fui-cell"><view class="fui-cell-text"><view style="font-size:40rpx;">申请获取以下权限</view><view class="subtitle" style="font-size:32rpx;margin-top:1rem">获取您的公开信息（昵称，头像）</view></view></view></view><view class="modal-footer"><button class="mod-fail" style="color:#999;border-radius:0;border-bottom-left-radius:12rpx;" bindtap="closeAuthM">取消</button><button class="mod-success" style="border-radius:0;border-bottom-right-radius:12rpx;" bindgetuserinfo="info_login" open-type="getUserInfo">确定</button></view></view></view></view>【如果要出现底部关闭按钮】：可以把下面的代码加到<view class="popup-center">层内<i class="closed icon icon-cuowu" bindtap=""></i>例如：<view wx:if="{{pagedata.coupon_hd && show_coupon}}" class="popup" id="show_card">        <view class="popup-body">    <view class="popup-center" style="width:80%;height:720rpx;background:url({{att_url}}{{pagedata.coupon_hd.sendimage || '../core/resource/images/h5game/card.png'}}) no-repeat;background-size:100% 100%;text-align:center;">                <view class="fui-page-title" style="font-size:28rpx;color:#fff;margin-top:320rpx">{{pagedata.coupon_hd.sendtitle || '恭喜您获得一张优惠券'}}</view>                <a class='block' data-func="access" bindtap="click" data-params="jy_weishop/coupon.myindex/">点击查看</a>                <i class="closed icon icon-cuowu" bindtap="closed_coupon"></i>        </view>        </view></view>【如果要底部弹窗】：购物清单弹窗示例；主要是popup-center换成popup-bottom<view wx:if="{{pagedata.showcarts==1}}" class="popup">                        <view class="popup-body">                        <view class="popup-bottom">                                <view class="fui-cell-group" style="margin-top:0;padding-top:1rem;">                                        <i data-type="0" bindtap="showcarts" class="closed icon icon-close red" style="font-size:40rpx;"></i>                                        <view class="fixed-title">                                                 <span class="befirst spacing">                                                                        <span class="icon icon-icon-xiexiantiao" style="color:#db232b"></span>                                                                 <span class="icon icon-icon-xiexiantiao" style="color:#1fcc1d"></span>                                                                 <span class="icon icon-icon-xiexiantiao" style="color:#5fed5e"></span>                                                </span>                                                 <span class="title-text">我的餐单</span>                                                 <span class="spacing">                                                                                                 <span class="icon icon-icon-xiexiantiao" style="color:#5fed5e"></span>                                                                                                 <span class="icon icon-icon-xiexiantiao" style="color:#1fcc1d"></span>                                                                                                 <span class="icon icon-icon-xiexiantiao" style="color:#db232b"></span>                                                </span>                                        </view>                                        <view class="fui-cell-group" style="margin-bottom:120rpx;max-height:800rpx;overflow-y: scroll;">                                        <view wx:for="{{pagedata.carts}}" wx:key="key" wx:if="{{item.total>0}}" class="fui-cell">                                                        <view class="fui-cell-text" style="font-size:30rpx">                                                                {{item.title}}<span class="subtitle" wx:if="{{item.optiontitle}}">({{item.optiontitle}})</span>                                                        </view>                                                        <view class="fui-cell-remark noremark">                                                                <span class="r-f red" style="margin-right:40rpx;font-size:30rpx">￥ {{item.price * item.total}} /{{item.unit ||'件'}}<span style="font-size:24rpx;color:#999" wx:if="{{item.weight!='0.00'}}">（{{item.weight}}kg）</span></span>                                                        </view>                                                        <view class="fui-cell-remark noremark">                                                                <view class="quick-num open">                                                                        <view bindtap="minus" data-g="{{item}}" data-iscart="true" class="minus icon icon-subtract" style="font-size:32rpx"></view>                                                                        <view class="num" style="color:#333">{{item.total}}</view>                                                                        <view bindtap="plus" data-g="{{item}}" data-iscart="true" class="plus icon icon-tianjia" style="font-size:32rpx"></view>                                                                </view>                                                        </view>                                        </view>                                        </view>                                </view>                                <view wx:if="{{pagedata.store.isrest != 0 && pagedata.allnum>0}}" class="fui-footer quick">                                        <view data-type="0" bindtap="showcarts" class="quick-cart {{pagedata.allnum < 1?'empty':''}}" style="width:90rpx">                                                <view class="dot" style="display: block;">{{pagedata.allnum}}</view>                                                <i class="icon jinyunicon icon-gouwuchexuanzhong" style="line-height:100rpx;padding:12rpx 20rpx;font-size:76rpx;color:#fff"></i>                                        </view>                                        <view class="quick-info">                                                <p style="color:#fff">￥<span class="price" style="font-weight:400">{{pagedata.showprice}}</span></p>                                        </view>                                        <view class="quick-submit remark" data-func="access" bindtap="click" data-params="jy_weidish/create//store_id={{pagedata.store_id}}" style="background:none;margin: 0">                                                选好了                                        </view>                                </view>                        </view>                        </view>                </view>