mui开发APP教程之仿天猫支付弹出自定义框

由于，创建webview需要调用到HTML5+，所以要在mui.plus()函数里面调用plus.webview.create()，而在浏览器上调试无法调用plus，所以这里只展示一个原始页面，弹出框就不展示了；

原始页面：

确认订单页面html代码：

<header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <span class="mui-pull-left" style="line-height: 45px;">确认订单</span>
    </header>


    <nav class="mui-bar mui-bar-tab">
        <p class="totalPrice">
            共<span class="orderAllCountNum">2</span>件
            总金额&yen;<span id="totalPrice">1158</span>
        </p>
        <p class="buyNow">
            <button id="submitOrderBtn" class="submitOrderBtn">提交订单</button>
        </p>
    </nav>



    <div class="mui-content">
        <div class="userInfo">
            <p>收货人：<span>123456</span></p>
            <p>电话：<span>11111111111</span></p>
            <p>收货地址：<span>xxx xxx xxx xxx</span></p>
        </div>
        <div id="userInfo">

        </div>
        <div class="orderGoodsList">
            <div class="orderGoodsListItem">
                <img class="orderGoodsListImg" src="../administrator/goodsImg/HSimg/hs0102.jpg" />
                <p class="orderGoodsName">
                    欧式2017一字肩新娘结婚婚纱深V蕾丝复古大牌礼服
                </p>
                <div class="orderGoodsInfo">
                    <p class="orderGoodsPrice"> &yen;589 </p>
                    <p class="orderGoodsCount">x1</p>
                </div>
                <p class="orderUserMsg">
                    卖家留言：
                <input type="text" class="mui-input-clear orderUserMsgIpt" placeholder="选填"  />
                </p>
                <p class='orderGoodsSmallCount'>
                    共<span class="smallCountGoodNum">1</span>件商品           
                    小计：&yen;<span class="smallCountGoodPrice">589</span>
                </p>
            </div>
            <div class="orderGoodsListItem">
                <img class="orderGoodsListImg" src="../administrator/goodsImg/ZSimg/zs0101.jpg" />
                <p class="orderGoodsName">
                    欧式2017一字肩新娘结婚婚纱深V蕾丝复古大牌礼服
                </p>
                <div class="orderGoodsInfo">
                    <p class="orderGoodsPrice"> &yen;569 </p>
                    <p class="orderGoodsCount">x1</p>
                </div>
                <p class="orderUserMsg">
                    卖家留言：
                <input type="text" class="mui-input-clear orderUserMsgIpt" placeholder="选填"  />
                </p>
                <p class='orderGoodsSmallCount'>
                    共<span class="smallCountGoodNum">1</span>件商品           
                    小计：&yen;<span class="smallCountGoodPrice">569</span>
                </p>
            </div>


        </div>

    </div>

js代码：

mui.plusReady(function(){
    //确认订单
    //关闭splash页面
    plus.navigator.closeSplashscreen();
    var payfor;  //支付页面
    var self=null;//当前页面
    //支付页面           点击提交订单则创建支付webview
    document.getElementById("submitOrderBtn").addEventListener('tap',function(){
        //获取当前webview
        self=plus.webview.currentWebview();

        if(payfor){//如果已经存在该窗口，则返回，避免快速点击创建多个窗口
            return
        }

        //不存在则创建支付窗口
        //支付页面距离顶端距离            自定义，需要多高则设置多高
        var top=plus.display.resolutionHeight-235;
        var href='payfor.html'

        //创建的webview显示payfor.html的内容
        payfor=plus.webview.create(href,'payfor.html',{
            width:'100%',
            height:'235px',
            top:top,
            scrollIndicator:'none',
            scalable:false,
            popGesture:'none'
        },{//传送到创建的webview页面的数据
            payforInfo:{
                'url':'test',
                'title':'测试',
                'content':'测试',
                'pageSourceId':self.id
            }
        });

        //显示支付窗口   并且显示遮罩层
        payfor.addEventListener('loaded',function(){
            payfor.show('slide-in-bottom',300);
        },false);
        self.setStyle({
            mask:'rgba(0,0,0,0.5)'
        });

        //遮罩层点击事件
        self.addEventListener('maskClick',function(){
            //关闭遮罩层
            self.setStyle({
                mask:'none'
            });
            //避免出现特殊情况，确保支付页面子在初始化时关闭
            if(!payfor){
                payfor=plus.webview.getWebviewById('share.html');
            }
            //关闭支付页面   并设为空，如果不为空就不会创建，直接return在一开始时候有判断
            if(payfor){
                payfor.close();
                payfor=null;
            }
        },false);

    },false);
});