js 自定义弹框

2019-08-07  本文已影响0人  余檬哒

问题: IOS X上 alert和confirm 不出现弹窗,直接刷新页面

效果图


image.png

html code

<!--模态窗口部分 add 190806-->
        <div id="over" class="over" style="display: none;">
            <!--用户可操作的页面-->
            <div id="content">
                <h3 id="tit" class="title"></h3>
                <div id="conbtn" class="conbtn" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;">
                    <span id="cancelBtn">
                        取消  
                    </span>
                    <span id="sureBtn">
                        确定  
                    </span>
                </div>
            </div>
        </div>

css code

/*add 190806*/
    /*#conbtn{display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;}*/
    
    #over{
                width: 100%;
                height: 100%;
                position: fixed!important;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                font-size: 22px;
                background-color: rgba(145,152, 159, 0.5);
            }

            #over>div {
                width: 300px;
                height: 129px;
                margin: 0 auto;
                margin-top: 60%;
                text-align: center;
                padding: 1px;
                background-color: white;
                border-radius: 10px;

            }


            #content {
                position: relative;
            }
            #close {
                position: absolute;
                top: -10px;
                right: -10px;
                width: 20px;
                height: 20px;
                cursor: pointer;
            }
            #over>div>h3 {
                margin-top: 20px;
            }
            .over{
                width: 100%;
                height: 100%;
                position: fixed!important;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                font-size: 22px;
                background-color: rgba(145,152, 159, 0.5);
                z-index: 9999;
            }
            .over h3{ border-bottom: 1px solid #CCCCCC;padding-bottom: 20px;}
            .conbtn span{width: 50%;display: block;font-size: 22px;text-align: center;padding: 10px 0;margin-top: 5px;}
            .conbtn span:nth-child(1){border-right: 1px solid #CCCCCC;}

js code

var home_obj = {
  //定义让模态窗口显示或隐藏的函数
    showOrHidden: function (flag,u,id,str) {
    // 获取到模态窗口
        var over = document.querySelector('#over');
        over.style.display = over.style.display == 'none' ? 'block' : 'none';
        
        var tit = document.getElementById('tit');
        tit.innerHTML = str
        
        var cancelBtn = document.querySelector('#cancelBtn');
        var sureBtn = document.querySelector('#sureBtn');
        
        cancelBtn.onclick = function (ev){
            console.log('取消');
            over.style.display = over.style.display == 'none' ? 'block' : 'none';
        }
        
        sureBtn.onclick = function (ev){
//          console.log('确定',ev);
//          alert(flag)
            
            if(flag == 'pay'){
                console.log(u,id)
                $.post("/wechat.php/xxx/?u="+u,'&id='+id,function(data){
                    if(data.ret == 1){
                        callpay(data.data, data.attach);
                    }else{
                        alert(data.msg)
                    }
                })
            }
            
            else if(flag == 'warning'){
                 $.post("/wechat.php/xxx/?u="+u,'id='+id,function(data){
                    if(data.ret == 1){
                        window.location.reload()
                    }else{
                        alert('当前状态不是待发货状态');
                        window.location.reload()
                    }
                })
            }
            
            else if(flag == 'shouhuo'){
                 $.post("/wechat.php/xxx/?u="+u,'id='+id,function(data){
                    if(data.ret == 1){
                        window.location.reload()
                    }else{
                        alert('当前状态不是待收货状态');
                        window.location.reload()
                    }
                })
            }
            
            else if(flag == 'del'){
                $.post("/wechat.phpxxx/",'u='+u+'&id='+id,function(data){
                    if(data.ret == 1){
                        window.location.reload()
                    }
                })
            }
            else{return;}
            
            
        }

    },
}

//订单支付
$(document).on("click",".pay",function(){
      home_obj.showOrHidden('pay',u,id,"确定支付吗?") // 弹窗
}
上一篇 下一篇

猜你喜欢

热点阅读