重复提交,加遮罩层

最新推荐文章于 2022-03-11 11:27:07 发布

Zerlinda_Li

最新推荐文章于 2022-03-11 11:27:07 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/licheng989/article/details/51149716

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

function ajaxLoading(msg,msgMaginTop){
	//信息提示
	var default_msg = '正在处理，请稍后。。。';
	//信息布局位置向上内边距
	var default_msgMaginTop= -45;
	var _msg = '';
	var _msgMaginTop=0;
	// 判断参数
	if (msg == 'undefined') {
		_msg = default_msg;
	} else {
		_msg = msg;
	}	
	if (msgMaginTop == 'undefined') {
		_msgMaginTop = default_msgMaginTop;
	} else {
		_msgMaginTop = msgMaginTop;
	}	
	//$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
	$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:document.body.offsetHeight}).appendTo("body");
	$("<div class=\"datagrid-mask-msg\"></div>").html(_msg).appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:(document.body.offsetHeight + _msgMaginTop) / 2});
}

function ajaxLoadEnd(){
	$(".datagrid-mask").remove();
	$(".datagrid-mask-msg").remove();
}

css:

.datagrid-mask {
    position: absolute;
    left: 0;
    top: 0;
    background: #ccc;
    opacity: 0.3;
    filter: alpha(opacity=30);
    display: none;
}

.datagrid-mask-msg {
    position: absolute;
    left: 100px;
    top: 50px;
    width: auto;
    height: 16px;
    padding: 12px 5px 10px 30px;
    background: #fff url('images/pagination_loading.gif') no-repeat scroll 5px 10px;
    border: 2px solid #ccc;
    color: #222;
    display: none;
}

使用示例:

   ajaxLoading();
	$('#myform').form('submit',{
		url:"vehAlarmHandleCtrl.do?method=setHandle",
		onSubmit: function(){
			return $(this).form('validate');
		}	,
		success: function(data){
			ajaxLoadEnd();
			returns(data);
		}
	});

效果: