网页提交时添加遮罩层

最新推荐文章于 2022-08-07 23:55:07 发布

flyingZippo

最新推荐文章于 2022-08-07 23:55:07 发布

阅读量5.8k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/flyingzip/article/details/49023805

版权

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

摘要由CSDN通过智能技术生成

// 表单提交遮罩
$(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(opac