JQuery 插件 - 彈窗：BlockUI

JQuery的彈窗插件，網上實在有很多做的比較好的，比如artDialog、layer，甚至EasyUI等等。這些在效果上做的非常好。但我覺得一個小小的彈窗提示，沒有必要引用這些（其實是有點大材小用了！）這里要介紹的是BlockUI，一個我認為非常好用的，簡單朴素輕量級的插件。

先看一下效果：

下面就來講一下使用。

一、引用插件

<script src="jquery.min.js" type="text/javascript"></script>
<script src="Jquery.BlockUI.min.js" type="text/javascript"></script>

二、使用

<script type="text/javascript">
         $.blockUI();      // 打開     
        
         //$.unblockUI();  // 關閉
</script>

只需要簡單的一句就可以得到上面圖片中的彈窗了。

三、參數設置及用法

打開BlockUI的源碼可以看到，彈窗的屬性都可以在defaults里面設置。

message : 彈出框的信息，可以為html，默認為：<h1>Please wait...</h1>

　　如：$.blockUI({message:'這是測評'});

      　　$.blockUI({message:$("#test")}); 

title : 彈窗標題，默認 null ，只能在 theme 為true 的時候使用

theme : 默認 false ,設置為 true 時將使用jqueryUI的 theme

draggable : 是否可拖動，默認 true

css : 彈窗的css樣式，默認如下

css:{

　　　　padding: 0,
　　　　margin: 0,
　　　　width: '30%',
　　　　top: '40%',
　　　　left: '35%',
　　　　textAlign: 'center',
　　　　color: '#000',
　　　　border: '3px solid #aaa',
　　　　backgroundColor:'#fff',
　　　　cursor: 'default'

　}

overlayCSS : 遮罩層的樣式，可以設置背景顏色，透明度，鼠標樣式，默認如下：

overlayCSS:{

　　　　　　backgroundColor: '#000',
　　　　　　opacity: 0.6,
　　　　　　cursor: 'default'

　　}

cursorReset : 等待消息返回是鼠標樣式重置，默認為Default

cursorReset: 'default'

growlCSS : 使用$.growlUI完成彈窗時的樣式（具體怎么用沒試過）

growlCSS: {
            width:        '350px',
            top:        '10px',
            left:        '',
            right:        '10px',
            border:        'none',
            padding:    '5px',
            opacity:    0.6,
            cursor:        'default',
            color:        '#fff',
            backgroundColor: '#000',
            '-webkit-border-radius':'10px',
            '-moz-border-radius':    '10px',
            'border-radius':        '10px'
      }

baseZ: 彈窗的z-index，默認1000，一般不需要修改，越大越在上面

centerX: 水平居中，默認為 true

centerY: 豎直居中，默認為 true

bindEvents:  遮罩時是否禁用鍵盤和鼠標事件，默認為 true

constrainTabKey: 遮罩內容的Tab導航是否可用，默認為 true

fadeIn : 淡入時間，默認為 200
fadeOut : 淡出時間，默認為 400

timeout : 自動淡出時間 默認為 0，不自動淡出

showOverlay : 是否自動遮罩 默認為 true

focusInput : 彈窗后自動獲得焦點 默認為 true

onBlock : 彈窗完成后的回調，可自行定義function，默認為 null 

onUnblock : 彈窗解鎖后的回調，可自行定義function，默認為 null 

常用的設置目測也就這么多了，想了解其它更多的屬性設置，可以訪問blockUI官網