success和error提示方式更改,使用弹出框遮罩层来提示

浏览:13977 发布日期:2016/08/30 分类:技术分享 关键字: success error
thinkphp3.2.3框架,
不需要修改success 模板,这是从onethink1.1后台得到提示得到的启发

首先是需要用到的页面链接一个js文件,该文件内容如下//dom加载完成后执行的js
$(function(){

    //ajax get请求
    $('.ajax-get').click(function(){
        var target;
        var that = this;
        if ( $(this).hasClass('confirm') ) {
            if(!confirm('确认要执行该操作吗?')){
                return false;
            }
        }
        if ( (target = $(this).attr('href')) || (target = $(this).attr('url')) ) {
            $.get(target).success(function(data){
                if (data.status==1) {
                    if (data.url) {
                        updateAlert(data.info + ' 页面即将自动跳转~','alert-success');
                    }else{
                        updateAlert(data.info,'alert-success');
                    }
                    setTimeout(function(){
                        if (data.url) {
                            location.href=data.url;
                        }else if( $(that).hasClass('no-refresh')){
                            $('#top-alert').find('button').click();
                        }else{
                            location.reload();
                        }
                    },1500);
                }else{
                    updateAlert(data.info);
                    setTimeout(function(){
                        if (data.url) {
                            location.href=data.url;
                        }else{
                            $('#top-alert').find('button').click();
                        }
                    },1500);
                }
            });

        }
        return false;
    });

    
    //ajax post submit请求
    $('.ajax-post').click(function(){

        var target,query,form;
        var target_form = $(this).attr('target-form');
        var that = this;
        var nead_confirm=false;
        if( ($(this).attr('type')=='submit') || (target = $(this).attr('href')) || (target = $(this).attr('url')) ){
            form = $('.'+target_form);

            if ($(this).attr('hide-data') === 'true'){//无数据时也可以使用的功能
                form = $('.hide-data');
                query = form.serialize();
            }else if (form.get(0)==undefined){
                return false;
            }else if ( form.get(0).nodeName=='FORM' ){
                if ( $(this).hasClass('confirm') ) {
                    if(!confirm('确认要执行该操作吗?')){
                        return false;
                    }
                }
                if($(this).attr('url') !== undefined){
                    target = $(this).attr('url');
                }else{
                    target = form.get(0).action;
                }
                query = form.serialize();
            }else if( form.get(0).nodeName=='INPUT' || form.get(0).nodeName=='SELECT' || form.get(0).nodeName=='TEXTAREA') {
                form.each(function(k,v){
                    if(v.type=='checkbox' && v.checked==true){
                        nead_confirm = true;
                    }
                })
                if ( nead_confirm && $(this).hasClass('confirm') ) {
                    if(!confirm('确认要执行该操作吗?')){
                        return false;
                    }
                }
                query = form.serialize();
            }else{
                if ( $(this).hasClass('confirm') ) {
                    if(!confirm('确认要执行该操作吗?')){
                        return false;
                    }
                }
                query = form.find('input,select,textarea').serialize();
            }

            $(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
            $.post(target,query).success(function(data){
                //alert(data.status);
                //alert(JSON.stringify(data));
                if (data.status==1) {
                    if (data.url) {
                        updateAlert(data.info + ' 页面即将自动跳转~','alert-success');
                    }else{
                        updateAlert(data.info ,'alert-success');
                    }
                    setTimeout(function(){
                        $(that).removeClass('disabled').prop('disabled',false);
                        if (data.url) {
                            location.href=data.url;
                        }else if( $(that).hasClass('no-refresh')){
                            $('#top-alert').find('button').click();
                        }else{
                            location.reload();
                        }
                    },1500);
                }else{
                    updateAlert(data.info);
                    setTimeout(function(){
                        $(that).removeClass('disabled').prop('disabled',false);
                        if (data.url) {
                            location.href=data.url;
                        }else{
                            $('#top-alert').find('button').click();
                        }
                    },200);
                }
            });
        }
        return false;
    });


    msgClose = function (o){
        o.remove();
    }

    window.updateAlert = function (text,c) {
        var mask=document.createElement("div");
        mask.className="mask";

        var msg=document.createElement("div");
        msg.className="msg";
    
        var msgTitle=document.createElement("div");
        msgTitle.className="msg-title";
        msgTitle.innerHTML="提示信息";
        msg.appendChild(msgTitle);

        var a=document.createElement("a");
        a.href="javascript:;"
        a.innerHTML="X";
        a.onclick = function(){
            msgClose(mask);
        }   
        msgTitle.appendChild(a);

        var msgContent=document.createElement("div");
        msgContent.className="msg-title";
        msgContent.innerHTML=text;

        var cc=document.createElement("div");
        var t=document.createElement("span");
        t.innerHTML=2;
        cc.appendChild(t);
        cc.className="c";
        $(cc).append("秒后自动关闭");
        msgContent.appendChild(cc);

        msg.appendChild(msgContent);

        mask.appendChild(msg);
        document.body.appendChild(mask);

        var st = setInterval(function(){
            var myDate = new Date();
            t.innerHTML = t.innerHTML - 1;
            if(t.innerHTML==0){
                msgClose(mask);
                window.clearInterval(st);
            }
        },1000);
    };

});
还有一个css文件,内容如下/*遮罩*/
.mask {
  height:100%;
  width:100%;
  position:fixed;
  top:0;
  z-index:1000;
  background-color: #000;
  background-color: rgba(0,0,0,0.7);
}

.msg{
  position: absolute;
  z-index: 1003;
  left: 50%;
  top: 200px;
  width: 450px;
  margin-left: -225px;
  font-size: 14px;
  border: 3px solid #ccc;
  background-color: #fff;

}

.msg .msg-title{
/* height: 20px;*/
 padding: 12px;
 background-color: #FAFAFA;
 border-bottom:1px solid  #E6E6E6;
 text-align: center;
}

.msg .msg-title a{
  color: #A1A1A1;
  float: right;
}

.msg .msg-title a:hover{
  text-decoration:none;
  color: #4D4538;
}

.msg .msg-content
{
  padding: 30px;
}
然后再需要用到的提交按钮添加class="ajax-post"和target-form="form-horizontal"如下: <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>如果不是表单,那么直接在对应的元素添加class="ajax-get" 如下 :<a class="ajax-get" href="{:U('User/logout')}">[退出]</a>
最佳答案
评论( 相关
后面还有条评论,点击查看>>