1.首先要准备好关于jquery的js文件
包括jquery-1.2.3.js和jquery.blockUI.js
2.在前台JSP页面中调用Jquery
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath =
request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"
/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'JqueryShowBlock.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script language="JavaScript" type="text/javascript"
src="<%=path %>/jquery/jquery-1.2.3.js"></script>
<script type="text/javascript" src="<%=path %>/jquery/jquery.blockUI.js"></script>
<script language="JavaScript">
function showBlock(){
jQuery.blockUI({ message: "处理中，请稍候...", css: {color:'#fff',border:'3px solid
#aaa',backgroundColor:'#CC3300'},overlayCSS: { opacity:'0.0' }});
setTimeout('hideBlock()',2000);//2000毫秒后调用hideBlock()
}
function hideBlock(){
jQuery.unblockUI();
}
</script>
</head>
<body>
This is my JSP page. <br>
ShowJqueryBlock Start:<input type="button" id="showBlock" value="ShowBlock"
onclick="showBlock()"/><br/>
</body>
</html>
关于jquery文件的目录结构如下：
---WebRoot
--------jquery
-----------jquery-1.2.3.js
-----------jquery.blockUI.js
3.页面执行结果如下：
当点击"ShowBlock"按钮时会调用jquery的jQuery.blockUI方法，"处理中，请稍后..."的jquery的block信息会显示，并且将页面锁定；过2000毫秒后调用jQuery.unblockUI()将jquery的block信息取消。
此文章为转载：
http://wl-ldy.iteye.com/blog/1038803
分享到：
相关推荐
The jQuery BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作[1] 。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM 中添加元素的方法来实现阻止用户...
jQuery blockUI plugin Version 2.39 (23-MAY-2011) Demos: $(document).ready(function() { $('#demo1').click(function() { $.blockUI({ message: $('#loginForm') }); setTimeout($.unblockUI, 2000); ...
最新版本的jquery blockUI 2.7.0，官方完整版，测试通过，想要自定义设置一些东西可以直接百度或者查看官网demo
jquery.blockUI插件用法实例,欢迎下载。
附件包含jquery.blockUI.JS，将其添加进引用，即可使用。
NULL 博文链接：https://javaeedevelop.iteye.com/blog/1577237
官方最新版的 jquery-blockUI，本人没有对其进行任何的修改，完全是从官网上下载了。
Jquery全屏遮掩及加载条插件，使用： <script type="text/javascript" src="js/jquery-1.4.2.min.js"> <script type="text/javascript" src="js/jquery.poshytip.js"> <script type="text/javascript" src="js/...
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定...当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。
包含jquery-1.2.3.js和jquery.blockUI.js 博文链接：https://wl-ldy.iteye.com/blog/1038803
下载jquery.blockUI.js 和 使用示例，解决层的问题。很好用。
jQuery BlockUI 插件（遮罩层）源代码 博文地址：http://blog.csdn.net/evangel_z/article/details/51123612
等待数据加载jquery.BlockUI.js,有Demo 效果不错
jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会组织用户在页面进行的操作,直到插件被关闭。
需要引入的js文件 博文链接：https://yijinglanshan.iteye.com/blog/845329
最新的jquery.blockUI
在做网站的开发过程中，可能需要使用弹出层，使用jquery的blockui插件可以很轻松的实现这个效果。blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆...