重复提交,加遮罩层

╰+哭是因爲堅強的太久メ 2022-07-28 09:49 118阅读 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);
    		}
    	});

效果:

![20160414111453854][]

[20160414111453854]: /images/20220724/750c414353a74ccdbbdd98652493796f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，118人围观）

还没有评论，来说两句吧...

相关阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 294 阅读

相关遮罩层的使用

.mark{ top: 0; left: 0; width: 100%;

女爷i/ 2022年10月11日 12:18/ 0 赞/ 184 阅读

相关 css3、scss给图片加遮罩层

![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

﹏ヽ暗。殇╰゛Y/ 2022年10月07日 11:46/ 0 赞/ 170 阅读

相关 jquery遮罩层效果

例如点击登录后弹出一个遮罩层“正在登录，请稍后....”，此时用户是不能操作的。代码如下：前提先引入 jquery-xxxx.min.js、jquery.blockUI.j

朴灿烈づ我的快乐病毒、/ 2022年08月09日 00:47/ 0 赞/ 252 阅读

相关重复提交,加遮罩层

function ajaxLoading(msg,msgMaginTop){ //信息提示 var default_msg = '正在处理，请稍后。

╰+哭是因爲堅強的太久メ/ 2022年07月28日 09:49/ 0 赞/ 119 阅读

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 276 阅读

相关 CSS实现遮罩层

<div id="main"> <button @click="open">open</button> <div cl

短命女/ 2022年05月26日 13:44/ 0 赞/ 301 阅读

相关自定义遮罩层

业务需求，又不想用网上找的。干脆自己写一个。 // obj 中的参数可以自定义。 var app_mask = { init: functi

╰半橙微兮°/ 2022年01月27日 18:09/ 0 赞/ 331 阅读

相关遮罩层代码

1. 目的 : 直接复制来用, 加快工作效率 <div class="cover"></div> .cover{

我会带着你远行/ 2021年09月17日 04:18/ 0 赞/ 488 阅读

相关 ajax同步提交时遮罩层不显示

业务需求：上传资源，由于某种原因必须用到ajax同步去上传。上传时耗时较长，为避免用户再上传过程中误操作，需要加遮罩层。猜到的坑：正常情况下，如果是异步是没

港控/mmm°/ 2021年07月26日 11:14/ 0 赞/ 408 阅读