jQuery BlockUI 插件

jQuery BlockUI 插件是一个可以用于在页面上创建模态对话框和阻止用户交互的jQuery插件。

原理

jQuery BlockUI 插件使用了一个遮罩层来阻止用户与页面上的元素进行交互。遮罩层是一个半透明的层，位于所有页面元素的上方，可以防止用户单击、滚动或使用键盘来与页面进行交互。同时，插件还提供了一种简单的方式来创建模态对话框，使用户无法访问应用程序中的其他内容，直到他们关闭对话框。

特点

• 遮罩层可以自定义颜色、透明度和对齐方式；
• 可以自定义模态对话框的大小、位置、标题和内容；
• 可以自定义消息框的样式和按钮；
• 支持通过AJAX异步加载内容；
• 支持在遮罩层上添加loading图标。

安装

可以通过以下方式安装jQuery BlockUI插件：

1. 下载插件文件
2. 在页面中引入jQuery和插件文件

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.blockUI.js"></script>

3. 调用插件函数

$.blockUI();

使用

首先需要引入jQuery和jQuery BlockUI插件的脚本文件。然后可以使用以下代码调用插件：

$.blockUI();

如果需要创建一个模态对话框，则可以使用以下代码：

$.blockUI({
    message: '<h1>Hello</h1>', //对话框内容
    css: { 
        border: 'none', //边框样式
        padding: '15px', //内边距
        backgroundColor: '#000', //背景颜色
        '-webkit-border-radius': '10px', //圆角
        '-moz-border-radius': '10px',
        opacity: .5, //透明度
        color: '#fff' //文字颜色
    }
});

还可以在对话框中添加按钮，并设置点击事件：

$.blockUI({
    message: '<h1>Hello</h1><button id="closeButton">Close</button>', //对话框内容和按钮
    css: { 
        border: 'none', //边框样式
        padding: '15px', //内边距
        backgroundColor: '#000', //背景颜色
        '-webkit-border-radius': '10px', //圆角
        '-moz-border-radius': '10px',
        opacity: .5, //透明度
        color: '#fff' //文字颜色
    },
    onBlock: function() {
        $('#closeButton').click($.unblockUI); //点击按钮关闭对话框
    }
});

示例

可以在以下链接查看更多演示和使用示例：https://malsup.com/jquery/block/

参考资料

• https://malsup.com/jquery/block/
• https://github.com/malsup/blockui