BlockUI 外掛是用於進行AJAX操作時模擬同步傳輸時鎖定瀏覽器操作。當它被啟用時，它會阻止使用者與頁面（或頁面的一部分）進行互動，直至它被取消。

BlockUI以在DOM中新增元素的方法來實現阻止使用者與瀏覽器互動的外觀和行為。

這個外掛的用法很簡單。

1 阻止使用者與頁面互動：

$.blockUI();

2 自定義提示資訊：

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

3 自定義顯示樣式：

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

4 解除對頁面的鎖定：

$.unblockUI();

5 如果要使用預設設定來同步所有的AJAX請求動作，程式碼如下：

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);

$('#box_btn').click(function(){   //給box_btn繫結一個滑鼠點選的事件

----------------------------------------------------------------------------------
BlockUI的預設選項設定如下：

 可以使用以下程式碼來自定義行為和樣式 $.blockUI.defaults = { 	
                 鎖定時顯示的提示資訊(無提示資訊時設定為null)     message:  '<h1>Please wait...</h1>',         
  可以用CSS來格式化鎖定時顯示的資訊    
  如果你希望使用一個外部樣式表，請使用一下程式碼     
 $.blockUI.defaults.css = {};     css: {  padding: 0, margin:  0,width:'30%',top:'40%', left:'35%',textAlign: 'center',  color: '#000', border: '3px solid #aaa',backgroundColor:'#fff' },
     設定遮罩層的樣式overlayCSS:  {  backgroundColor:'#000', opacity: '0.6' },  // 允許在ie6中縮放body元素。這會使較短的頁面看上去好一些    
 // 如果你不想body元素的高度被改變，請設定為disable     allowBodyStretch: true,          
// 預設情況下blockUI會禁止tab導航     constrainTabKey: true,         
 // fadeOut時間單位為毫秒。設為0的話，在解除鎖定時不使用fadeout效果。      fadeOut:  400,         
 // 禁止在FF/Linux上使用遮罩層樣式(由於透明度的效能問題)     applyPlatformOpacityRules: 1 }; 

改變blockUI的設定非常簡單，有2種方式：

• 1、全域性設定, 通過直接指定$.blockUI.defaults物件的值來設定。
• 2、區域性設定, 將options物件放到 blockUI (或 block) 函式內部。

全域性設定

你可以通過直接的賦值來改變預設的選項。例如：

// 改變提示資訊的邊框 $.blockUI.defaults.css.border = '5px solid red';  // 縮短fadeOut效果的時間 $.blockUI.defaults.fadeOut = 200; 

區域性設定

區域性設定是將options物件放到 blockUI (或 block) 函式內部。這會強制使用區域性設定來代替全域性設定的值。例如:

// 改變提示資訊的邊框 $.blockUI({ css: { border = '5px solid red'} });  ...  // 縮短fadeOut效果的時間 $.blockUI({ fadeOut: 200 });  ...  
// 使用一個不同的提示資訊 $.blockUI({ message: 'Hold on!' });

$.blockUI定義了一個message屬性的，該屬性的值就定義了要彈出的元素，比如要彈出一個id為box的div元素，就可以這樣寫：message: $(‘#box’)，對應了上面的第4行程式碼。需要注意的是，要彈出的那個元素在彈出之前要將其在頁面中隱藏即設定該元素的CSS樣式為display:none。

$.blockUI還定義了一個css屬性，該屬性可以對彈出層的樣式進行再定義。細心的同志可能會開啟BlockUI的庫檔案檢視，其實在庫檔案中也預設定義了一個彈出層的樣式，如果你在頁面中定義的樣式效果並不是很理想，最好是看看庫檔案中的$.blockUI.defaults的CSS屬性。

如果你想了解一些BlockUI的更高階的用法你可以去該外掛的官網看看。