jquery的blockUI遮罩层的使用

// 引入jQuery和jQuery.blockUI插件
// <script src="path/to/jquery.min.js"></script>
// <script src="path/to/jquery.blockUI.min.js"></script>
 
$(document).ready(function() {
    // 当按钮被点击时，使用blockUI方法显示遮罩层
    $('#myButton').click(function() {
        $.blockUI({ 
            message: '<h1>正在处理...</h1>', 
            css: { 
                border: 'none', 
                padding: '15px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .5, 
                color: '#fff' 
            } 
        });
 
        // 模拟一个异步操作，比如Ajax请求
        setTimeout(function() {
            // 异步操作完成后，取消遮罩层
            $.unblockUI();
        }, 2000); // 假设异步操作耗时2秒
    });
});

这段代码展示了如何在点击按钮后使用jQuery的blockUI方法来显示一个自定义的遮罩层，并在2秒后取消遮罩层。这是实现简单的页面加载等待效果的一个基础例子。