JQuery Blockui Implementation Lock screen

When we call backstage through Ajax in front-end , because of the different amount of data, may cause long wait, but at this time the waiting user can still manipulate other elements on the interface, such as re-click a button , This situation is not allowed. Or sometimes you need to perform certain operations, the user Interface lock screen, after a period of time to re-restore, of course, would like to add a layer of div to cover the page, but the jquery Blockui has helped you do this work, We can use simple JS code to achieve a variety of effects. jQuery Blockui use: Blockui's official website can be accessed via the following address, with a large number of demos available for reference http://www.malsup.com/jquery/block/

          First of course, to introduce Blockui, the following demo uses 1.6

<script type= "Text/javascript" src= "jquery-1.6.1.min.js" ></ script>

<script type="Text/javascript" src="jquery-block-ui.js" ></script>

11111111111111111111111111111111111

• $ (function () {
• lock screen immediately after loading and display Hello World as lock screen information
• //If you want to lock the screen but do not display any information, you can set to null
• $.blockui ({
• Message:"Hello World";
• })
• })

22222222222222222222222222222222222222222222222222

• $ (function () {
• //can add style to Blockui
• $.blockui ({css: {
• border: "None",
• padding: "15px",
• BackgroundColor: "#000",
• " -webkit-border-radius": "10px",
• " -moz-border-radius": "10px",
• Opacity:. 5,
• Color: "#fff"
• }})
• })

33333333333333333333333333333333333333333333333333333333

• $ (function () { 
•     /*  
•      *   can get a form with ID loginform directly for pop-up,  
•      *   Implement a Popup-like function  
•      */  
•     $.blockui ({ 
•          message : $ ( "#loginForm")  
•      })  
•     //2 seconds after closing occlusion  
•     settimeout ($.unblockui,2000);  
• })

4444444444444444444444444444444444444444444444444444

• $ (function () {
• $.blockui ();
• SetTimeout (function () {
• $.unblockui ({
• //Perform a callback function to unlock the screen
• Onunblock: function () {
• Alert ("Onunblockui");
• }
• })
• },2000);
• });

5555555555555555555555555555555555555555555555555555555

• $ (function () {
• $.blockui ({
• //When the lock screen is clicked to trigger an event elsewhere, it is triggered to unlock the screen
• Onoverlayclick: $.unblockui
• });
• });

66666666666666666666666666666666666666666666666666666666

• $ (function () {
• //Set global ajax start lock screen
• $ (document). Ajaxstart (function () {
• Blocks ();
• });
• //Set global Ajax end unlocked
• $ (document). AjaxStop (function () {
• $.unblockui ();
• });
• });

JQuery Blockui Implementation Lock screen