进云-小程序-实现弹窗的教程

//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>