jquery block ui

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

先看看BlockUI的演示效果：

查看演示

BlockUI支持很多常見的彈出層，表單、圖片、div窗口等。那麼這個插件該如何使用呢？接着往下看。

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

導入庫文件後，就可以調用BlockUI了，BlockUI的調用挺簡單的，看下面這段代碼

$(function(){
$('#box_btn').click(function(){   //給box_btn綁定一個鼠標點擊的事件
        $.blockUI({    //當點擊事件發生時調用彈出層
             message: $('#box'),    //要彈出的元素box
             css: {    //彈出元素的CSS屬性
                 top: '50%',
		 left: '50%',
		 textAlign: 'left',
		 marginLeft: '-320px', 
		 marginTop: '-145px', 
                 width: '600px',
                 background: 'none'
            } 
        }); 
	$('.blockOverlay').attr('title','單擊關閉').click($.unblockUI);   //遮罩層屬性的設置以及當鼠標單擊遮罩層可以關閉彈出層
	$('.close').click($.unblockUI);  //也可以自定義一個關閉按鈕來關閉彈出層
});
});

看了上面的代碼，其實你會發覺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

原載於：雨夜帶刀’s Blog
本文鏈接：http://stylechen.com/jquery-blockui.html
如需轉載請以鏈接形式註明原載或原文地址。