jQuery BlockUI Plugin Demo 4（Element Blocking Examples）

Element Blocking Examples

This page demonstrates how to block selected elements on the page rather than the entire page. The buttons below will block/unblock access to the bordered area beneath them.

  

<input id="blockButton" type="submit" value="Block">
<input id="blockButton2" type="submit" value="Block with Message">
<input id="unblockButton" type="submit" value="Unblock">

 

This text will not be blocked.  Test link - click me!

The following code is used on this page:

<script type="text/javascript"> 
    $(document).ready(function() { 
 
        $('#blockButton').click(function() { 
            $('div.test').block({ message: null }); 
        }); 
 
        $('#blockButton2').click(function() { 
            $('div.test').block({ 
                message: '<h1>Processing</h1>', 
                css: { border: '3px solid #a00' } 
            }); 
        }); 
 
        $('#unblockButton').click(function() { 
            $('div.test').unblock(); 
        }); 
 
        $('a.test').click(function() { 
            alert('link clicked'); 
            return false; 
        }); 
    }); 
</script>

 参考：http://malsup.com/jquery/block/#overview