JQuery BlockUI详解|极客教程

JQuery BlockUI详解

1. 什么是JQuery BlockUI

JQuery BlockUI是一个开源JS插件，用于创建自定义弹出窗口和加载动画效果。它提供了一种简单而强大的方法来阻止用户与页面交互，并显示请求正在进行处理的消息。

JQuery BlockUI可以用于各种情况，如在后台加载长时间运行的任务时，显示进度条或自定义消息。它还可以在用户等待服务器响应时，使页面看起来更具响应性。

2. 如何使用JQuery BlockUI

2.1 引入JQuery库和BlockUI插件

首先，在HTML页面中引入JQuery库和BlockUI插件。可以通过CDN引用或下载并引入本地文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery BlockUI</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="jquery.blockUI.js"></script>
</head>
<body>
...
</body>
</html>

2.2 创建基本的模态弹窗

要创建一个基本的模态弹窗，在需要显示弹窗的JavaScript代码中使用如下代码：

$.blockUI({ message: '<h1>Hello World!</h1>' });

上述代码中，message选项指定了弹窗中要显示的内容。在这个示例中，我们显示了一个简单的h1标题。

2.3 显示和隐藏加载动画

要显示一个加载动画，可以使用如下代码：

$.blockUI({ message: '<h1>Loading...</h1>' });

在加载完成后，可以使用unblockUI方法隐藏加载动画：

$.unblockUI();

2.4 自定义弹窗样式

BlockUI允许自定义弹窗的样式。可以通过设置CSS属性或传递一个自定义的CSS类来实现。

$.blockUI({ message: '<h1>Hello World!</h1>', css: { backgroundColor: '#FF0000', color: '#FFFFFF' } });

上述代码将设置弹窗的背景颜色为红色，文本颜色为白色。

3. BlockUI常用选项

BlockUI提供了许多选项，可以用来自定义弹窗的行为和外观。以下是一些常用选项的详细说明。

message：要显示在弹窗中的内容。可以是HTML代码或纯文本。
css：用于自定义弹窗的CSS样式。
baseZ：设置弹窗的初始z-index值。
overlayCSS：用于自定义遮罩层的CSS样式。
onBlock：在弹窗显示之前触发的回调函数。
onUnblock：在弹窗隐藏之后触发的回调函数。
fadeIn：设置弹窗显示时是否使用淡入效果。
fadeOut：设置弹窗隐藏时是否使用淡出效果。

通过使用这些选项，您可以完全控制弹窗的外观和行为。

4. 示例

下面是一个使用JQuery BlockUI的简单示例，演示了如何创建自定义弹窗和加载动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery BlockUI Example</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="jquery.blockUI.js"></script>
</head>
<body>
    <button id="button">Show Modal</button>

    <script>
     $(document).ready(function() {$ ("#button").click(function() {
            // 显示自定义弹窗
             $.blockUI({ message: '<h1>Hello World!</h1>', css: { backgroundColor: '#FF0000', color: '#FFFFFF' } }); // 模拟服务器响应 setTimeout(function() { // 隐藏加载动画$ .unblockUI();
            }, 3000);
        });
    });
    </script>
</body>
</html>

在上述代码中，当用户点击”Show Modal”按钮时，将显示一个自定义弹窗，并模拟了一个3秒钟的服务器响应。在响应完成后，加载动画将被隐藏。