简介
jquery.blockUI 是一个基于 jQuery 的插件，可以帮助前端开发者在页面中添加遮罩层，防止用户误操作或者等待操作完成。它可以用来禁用整个页面、指定元素或区域，并且可以自定义样式和提示信息。
本文将详细介绍 jquery.blockUI 的使用方法，包括如何安装和配置，以及常见的应用场景和注意事项。
安装和配置
在使用 jquery.blockUI 之前，需要先安装 jQuery 和 blockUI 插件。
安装 jQuery
jQuery 是一款广泛使用的 JavaScript 库，提供了简洁强大的 API，能够快速处理 DOM 操作、事件绑定、动画效果等常见任务。
可以通过 npm 或者 CDN 引入 jQuery，具体方法如下：
使用 npm 安装
npm install jquery
使用 CDN 引入
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
安装 blockUI 插件
blockUI 插件是一个基于 jQuery 的扩展，可以用来创建遮罩层，阻止用户的交互行为。可以通过 npm 安装，也可以手动下载并引入。
使用 npm 安装
npm install block-ui
手动引入
从 github 下载最新版本的 blockUI.min.js，然后在页面中引入：
<script src="path/to/blockUI.min.js"></script>
配置 blockUI
在使用 blockUI 插件之前，需要对其进行一些全局配置，以便按需定制样式和提示信息。
在代码中添加以下代码即可完成全局配置：
-- -------------------- ---- -------
---------------------- - -
-------- --
------- --
------ ------
---- ------
----- ------
---------- ---------
------ -------
------- -------
---------------- -------
------- ------
--
-------------------------- - ----------------------其中，css 属性用来设置遮罩层的样式，message 属性用来设置默认的提示信息。这些属性可以根据具体需求进行修改。
使用方法
禁用整个页面
要禁用整个页面，只需调用 $.blockUI() 方法即可。该方法会在页面上创建一个全屏的遮罩层，并显示默认提示信息。
$(document).ready(function() {
$('#btnDisable').click(function() {
$.blockUI();
});
});禁用指定元素或区域
要禁用指定的元素或区域，只需将其作为参数传递给 $.blockUI() 方法即可。该方法会在指定元素上方创建一个局部的遮罩层，并显示默认提示信息。
$(document).ready(function() {
$('#btnDisableDiv').click(function() {
$('#myDiv').block();
});
});自定义提示信息和样式
要自定义提示信息和样式，可以通过 message 和 css 属性进行设置。其中，message 属性用来指定提示信息的内容，css 属性用来指定遮罩层的样式。
-- -------------------- ---- -------
---------------------------- -
-------------------------------- -
-----------
-------- ----------- --------------
---- -
------- ---- ----- -----
-
---
---
---解除遮罩层
要解除遮罩层，只需调用 $.unblockUI() 方法即可。该方法会移除所有遮罩层，并恢复页面的交互行为。
$(document).ready(function() {
$('#
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/34673) ，转载请注明来源
[https://www.javascriptcn.com/post/34673](https://www.javascriptcn.com/post/34673)