网页提交时添加遮罩层

最新推荐文章于 2020-05-11 10:46:34 发布

flyingZippo

最新推荐文章于 2020-05-11 10:46:34 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/flyingzip/article/details/49023805

JS 专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了如何在网页表单提交和Ajax请求时添加遮罩层，以提供更好的用户体验。通过JavaScript和jQuery实现，遮罩层在提交开始时显示，请求结束后或超时5秒后自动消失。同时，代码包含对窗口大小改变的响应，以确保遮罩层始终覆盖整个页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 表单提交遮罩
$(document).ready(function() {
	$("form").submit(function() {
		// 添加
		GRAYLAYER.create("grayLayer-div");
		window.onblur = function() {
			// 删除
			GRAYLAYER.del("grayLayer-div");
		};
	});
});

// aiax提交遮罩
$.ajaxSetup({
	cache : false,
	type : "POST",
	beforeSend : function(xhr) {
		// 添加
		GRAYLAYER.create("grayLayer-div");
	},
	complete : function(xhr, status) {
		// 删除
		GRAYLAYER.del("grayLayer-div");
	},
	success : function(data, textStatus) {
		// 删除
		GRAYLAYER.del("grayLayer-div");
	},
	error : function(xhr, status, e) {
		// 删除
		GRAYLAYER.del("grayLayer-div");
	}
});

var GRAYLAYER = {
	create : function(className) {
		var _grayLayer = document.createElement("div");
		_grayLayer.className = className;
		_grayLayer.style.cssText = "display:block;position: absolute;top: 0px;left: 0px;background: #0000;opacity: 0.3;filter: alpha(opacity=50);z-index: 999;";
		_grayLayer.style.width = $(document).width() + 'px';
		_grayLayer.style.height = $(document).height() + 'px';
		document.body.appendChild(_grayLayer);
		this.resize(className);
		setTimeout("GRAYLAYER.del('grayLayer-div');", 5000);
	},
	del : function(className) {
		$("." + className).remove();
	},
	resize : function(className) {
		$(window).resize(function() {
			$("." + className).css({
				"width" : $(document).width(),
				"height" : $(document).height()
			});
		});
	}
};