Mui + hbuilder + h5api simulate pop-up payment style

The effect is as follows ：

Don't tangle with the beauty and ugliness of style , Incomparably complete functions .

<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" />  wallet 
									<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" />  WeChat 
								</a>
							</li>
							<li class="mui-table-view-cell integral">
								<a class="mui-navigate-right">
									<img src="../img/zfb.png" />  Alipay 
								</a>
							</li>
							<li class="mui-table-view-cell end">
								<a class="mui-navigate-right">
									 Cancel payment 
								</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;
}

Click to pay

// Click to pay 
mui('.header_right').on('tap', '.header_botton', function() {
    
				mui("#popover").popover('toggle', document.getElementById("div"));
			})

Cancel payment pop-up

	// Click Cancel payment 
	mui('.mui-table-view').on('tap', '.end', function() {
    
		mui("#popover").popover('hide');
	})