jquery的blockUI遮罩层的使用

// 引入jQuery和jQuery.blockUI插件
// <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
 
// 页面加载完成后执行
$(document).ready(function() {
    // 绑定按钮点击事件
    $('#button').click(function() {
        // 使用blockUI显示遮罩层
        $.blockUI({ 
            message: '<h1>正在处理...</h1>', 
            css: { 
                border: '1px solid #aaa', 
                padding: '10px', 
                backgroundColor: '#fff', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .9, 
                color: '#000'
            }
        });
 
        // 模拟异步操作，例如Ajax请求
        setTimeout(function() {
            // 取消遮罩层
            $.unblockUI();
        }, 2000); // 假设异步操作耗时2秒
    });
});
 
// HTML结构
// <button id="button">执行异步操作</button>

这段代码演示了如何使用jQuery的blockUI插件来在执行异步操作时显示一个加载提示。当用户点击按钮时，会出现一个遮罩层显示“正在处理...”，并且在2秒后消失。这种方法提高了用户体验，特别是在执行耗时操作时。