mui + hbuilder + h5api模拟弹出支付样式

效果如下：

不要纠结样式的美丑，功能无比齐全。

<div id="div"></div>
					<div id="popover" class="mui-popover" style="height: 250px;">
						<div class="mui-popover-arrow"></div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell my_wallet" :id=" pd_money?'kzf_money':'bkzf_money' ">
								<a class="mui-navigate-right" href='#pay'>
									<img src="../img/my_wallet.png" /> 钱包
									<span class="money">￥{
   {money}}</span>
								</a>
							</li>
							<li class="mui-table-view-cell my_recommend">
								<a class="mui-navigate-right">
									<img src="../img/weixin.png" /> 微信
								</a>
							</li>
							<li class="mui-table-view-cell integral">
								<a class="mui-navigate-right">
									<img src="../img/zfb.png" /> 支付宝
								</a>
							</li>
							<li class="mui-table-view-cell end">
								<a class="mui-navigate-right">
									取消支付
								</a>
							</li>
						</ul>
					</div>

.mui-table-view {
    
	background: #FFFFFF;
	margin: .25rem auto;
	border-radius: 5px;
	margin-bottom: 0;
}

.mui-table-view-cell {
    
	line-height: 1.3rem;
}

.mui-navigate-right img {
    
	display: inline-block;
	width: .4rem;
	margin-right: .5rem;
}

.mui-table-view-cell>a:not(.mui-btn) {
    
	padding-right: .7rem;
	padding-left: .7rem;
	font-size: .4rem;
	color: #000000;
}

.money {
    
	color: #fd9309;
	margin-left: 1rem;
}
.end{
    
	text-align: center;
}

点击支付

//点击支付
mui('.header_right').on('tap', '.header_botton', function() {
    
				mui("#popover").popover('toggle', document.getElementById("div"));
			})

取消支付弹框

	//点击取消支付
	mui('.mui-table-view').on('tap', '.end', function() {
    
		mui("#popover").popover('hide');
	})