Jquery中的blockUI的运用 _Web前端

Jquery中的blockUI的使用
Jsp中的信息：

<body>
   Test Show Block Information.<input type="button" id="test"    onclick="showBlock()" value="show Block information" /><br>
</body>

JavaScript的信息：

<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript">
   function showBlock(){
         jQuery.blockUI({ message: "处理中，请稍候...",
 css: {color:'yellow',border:'3px solid #aaa',
backgroundColor:'#CC3300'},overlayCSS: {backgroundColor:'green' }});
}
</script>

未点击按钮前的效果：

点击按钮后的效果：

具体的参数解释：
jQuery.blockUI({ message: "处理中，请稍候...",
css: {color:'yellow',border:'3px solid #aaa',
backgroundColor:'#CC3300'},overlayCSS: {backgroundColor:'green' }});
}
1.message是区域块的显示信息
2.css中的color是区域块中字体的颜色
3.css中的border和backgroundcolor是区域块的边框和背景色的设置
4.overlaycss是整个页面的背景色除去区域块的背景色。

如果要取消blockUI的显示可以调用JavaScript：

<script type="text/javascript">
function hideBlock(){
  jQuery.unblockUI();
}
</script>