Jquery中的blockUI的使用-优快云博客

本文介绍了一个使用JSP和jQuery BlockUI插件创建的简单示例。该示例展示如何通过点击按钮来显示带有自定义消息的遮罩层，并设置了遮罩层和背景的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

未点击按钮前的效果：

[img]http://dl.iteye.com/upload/attachment/357010/52587511-fbb9-3697-bc32-5cfd38a972be.png[/img]

点击按钮后的效果：

[img]http://dl.iteye.com/upload/attachment/357012/4bf1469d-590c-3c4d-899b-02931971bc80.png[/img]

具体的参数解释：
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>