JQuery网页遮罩层插件blockUI.js

简介

jQuery BlockUI 插件可以在不同锁定浏览器的同时，模拟同步模式下发起 Ajax 请求的行为。使用 XMLHttpRequest 对象同步模式导致整个浏览器锁定，直到远程调用完成为止。这通常不是一种可取的行为。该插件激活时，会组织用户在页面进行的操作，直到插件被关闭。BlockUI 通过向 DOM 中添加元素实现其外观和组织用户交互的行为。

使用

1.  引入 jquery 和 jquery.blockUI.js 文件

2. 调用

用法很简单，组织用户对页面的交互：

$.blockUI();

使用自定义信息阻塞UI：

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

使用自定义样式阻塞UI：

$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });

解除对页面的遮罩

$.unblockUI();

页面阻塞示例

<script type="text/javascript">

    // unblock when ajax activity stops
    $(document).ajaxStop($.unblockUI);

    function test() {
        $.ajax({ url: 'wait.php', cache: false });
    }

    $(document).ready(function() {
        $('#pageDemo1').click(function() {
            $.blockUI();
            test();
        });
        $('#pageDemo2').click(function() {
            $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
            test();
        });
        $('#pageDemo3').click(function() {
            $.blockUI({ css: { backgroundColor: '#f00', color: '#fff' } });
            test();
        });

        $('#pageDemo4').click(function() {
            $.blockUI({ message: $('#domMessage') });
            test();
        });
    });

</script>

...

<div id="domMessage" style="display:none;">
    <h1>We are processing your request.  Please be patient.</h1>
</div>

相关链接

官网地址：http://malsup.com/jquery/block/

Github 地址 ：https://github.com/malsup/blockui/