juery blockBI 彈出層外掛程式

經常會有些同志問我有沒有好用的基於jQuery的彈出層外掛程式，我通常都會毫不猶豫的推薦他這款外掛程式–BlockUI。我也極少接觸到其他的jQuery彈出層外掛程式，因為我覺得有了BlockUI這款功能強大的外掛程式已經能滿足我的需求了。

先看看BlockUI的示範效果：

查看示範

BlockUI支援很多常見的彈出層，表單、圖片、div視窗等。那麼這個外掛程式該如何使用呢？接著往下看。

先匯入jQuery的庫檔案(小提示：使用Google伺服器的壓縮版jQuery庫檔案載入速度會更快)，然後再匯入BlockUI的庫檔案，如果你覺得庫檔案比較大你可以使用壓縮技術對其進行壓縮，本博在另一篇文章中詳細的說明了javascript檔案和CSS檔案的壓縮。

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

2	<script src="images/jquery.blockUI.js" type="text/javascript"></script>

匯入庫檔案後，就可以調用BlockUI了，BlockUI的調用挺簡單的，看下面這段代碼

01	$(function(){

02	$('#box_btn').click(function(){   //給box_btn綁定一個滑鼠點擊的事件

03	$.blockUI({    //當點擊事件發生時調用彈出層

04	message: $('#box'),    //要彈出的元素box

05	css: {    //彈出元素的CSS屬性

06	top: '50%',

07	left: '50%',

08	textAlign: 'left',

09	marginLeft: '-320px',

10	marginTop: '-145px',

11	width: '600px',

12	background: 'none'

13

}

14

});

15	$('.blockOverlay').attr('title','單擊關閉').click($.unblockUI);   //遮罩層屬性的設定以及當按一下滑鼠遮罩層可以關閉彈出層

16	$('.close').click($.unblockUI);  //也可以自訂一個關閉按鈕來關閉彈出層

17

});

18

});

看了上面的代碼，其實你會發覺BlockUI的使用很簡單，有2個重要的方法分別是調用彈出層($.blockUI)和關閉彈出層($.unblockUI)。

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

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

如果你想瞭解一些BlockUI的更進階的用法你可以去該外掛程式的官網看看說明文檔。

BlockUI的是：hhttp://jquery.malsup.com/block/#download

另一個簡單實用的彈出層組件–easyDialog：http://stylechen.com/easydialog-v2.0.html