loading图标modal弹窗 和jquery ajax的关系

在ajax配置中async:false,非异步,modal窗口会失效,只有重新设置为async:true,或者删除async的设置,则loading的模态框才能展示出来

loading图标的模态框;

<div class="modal" id="loading" tabindex="-1" role="dialog" aria-labelledby="imgModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" style="z-index: 9990; display: none;">

        <!-- URL -->
        <div class="modal-dialog">
            <div class="loading">
                <!--conter-->
                <img src=<?=Url::to('basic/web/imgs/loading2.gif',true)?>>
            </div>
        </div>
        <!--URLend-->
    </div>

 

JS代码

//添加订单触发事件
additem = function(id){

    $('#loading').modal('show');
// return;
    if(id==null||id==undefined||id==''){

        alert('id没有或者无效');
        return;
    }
    var url ='/basic/web/index.php?r=site/orders';

    $.ajax({
        //async:false,非异步,modal窗口失效;
        async:true,
        url:url,
        type:'POST',
        data:{
            buyer_id:$('#buyer').val(),
            item_id:id,
            qty:1,
            price_sale:$('#price'+id).val(),
        },
        dataType:'html',
        
    })
    .done(function(msg){
        $('#loading').modal('hide');
        alert(msg);
    });
}

 

posted @ 2017-04-13 17:57  jerryhe326  阅读(2028)  评论(0编辑  收藏  举报