jQuery BlockUI Plugin Demo 3（Page Blocking Examples）

This page demonstrates several ways to block the page. Each button below activates blockUI and then makes a remote call to the server.

The following code is used on this page:

<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/#overview