Jquery Blockui Usage

1 Examples of locked pages

<Scripttype= "Text/javascript">    //unblock when Ajax activity stops$ (). Ajaxstop ($.unblockui); functionTest () {$.ajax ({URL:'wait.php', Cache:false }); } $ (document). Ready (function() {        $('#pageDemo1'). Click (function() {$.blockui ();        Test ();        }); $('#pageDemo2'). Click (function() {$.blockui ({message:'' });        Test ();        }); $('#pageDemo3'). Click (function() {$.blockui ({css: {backgroundcolor:'#f00', Color:'#fff' } });        Test ();        }); $('#pageDemo4'). Click (function() {$.blockui ({message: $ ('#domMessage') });        Test ();    }); });</Script>...<DivID= "Dommessage"style= "Display:none;">    <H1>Processing, please wait ...</H1></Div>

------------------------------------------------------------------------------------
2 Examples of locking elements
This shows how to lock the elements in the page, not the entire page. Please click the Block/unblock button to see the effect.

<Scripttype= "Text/javascript">    $(function() {        $('#blockButton'). Click (function() {            $('div.test'). Block ({message:NULL });        }); $('#blockButton2'). Click (function() {            $('div.test'). Block ({message:'', CSS: {border:'3px Solid #a00' }             });        }); $('#unblockButton'). Click (function() {            $('div.test'). unblock ();        }); $('a.test'). Click (function() {alert ('Link Clicked'); return false;    }); });</Script>

------------------------------------------------------------------------------------
3 Simple dialog Box example
This page shows how to display a simple simulation dialog box. The following buttons activate the display of a blockUI custom message. This AJAX request will be sent or canceled according to the user's response (yes or no) and will remain locked for the duration of the user's decision.

<Scripttype= "Text/javascript">    $(function() {        $('#test'). Click (function() {$.blockui ({message: $ ('#question'), CSS: {width:'275px' } });        }); $('#yes'). Click (function() {            //Update the block message$.blockui ({message:"" }); $.ajax ({URL:'wait.php', Cache:false, Complete:function() {                    //unblock when remote call returns$.unblockui ();        }            });        }); $('#no'). Click ($.unblockui); });</Script>...<inputID= "Test"type= "Submit"value= "Show dialog box" />...<DivID= "question"style= "Display:none; Cursor:default">        <H1>Are you sure you want to continue?</H1>        <inputtype= "button"ID= "Confirm"value= "Yes" />        <inputtype= "button"ID= "Cancel"value= "No" /></Div>

Jquery Blockui Usage