对jQuery blockUI插件进行了小的封装扩展，支持confirm、alert、dialog弹出窗口提示信息，支持按钮回调事件。可以自定义css样式、覆盖blockUI的样式等
首先要到jquery blockUI 官方网址：http://malsup.com/jquery/block/
官网提供各种各样的demos 可以根据官网提供的样式和格式设计自己的提示框，官方demos如下：http://malsup.com/jquery/block/#demos
test.jsp<%@ page language="java" contentType="text/html; charset=utf-8"
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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.blockUI.js"></script>
<script type="text/javascript">
$(function(){
ajax请求前触发和结束后触发
$(document).ajaxStart($.blockUI({
message:$('#loading"),
css:{
top:($(window).height()-400)/2+'px',
left:($(window).width()-400)/2+'px',
width:'400px',
border:'none'
},
overlatCSS:{backgroundColor:'fff'}
}).ajaxStop($.unblockUI);
//默认样式
var a1 = $("a:eq(0)");
a1.click(function(){
a1.css("color","green");
$.blockUI();
});
//自定义内容
var a2 = $("a:eq(1)");
a2.click(function(){
$.blockUI({message:'正在处理，请等待...'});
});
//自定义样式
var a3 = $("a:eq(2)");
a3.click(function(){
$.blockUI({ css: {
border:'solid green 2px',
backgroundColor:'blue'
}
});
});
//蓝色背景
var a4 = $("a:eq(3)");
a4.click(function(){
$.blockUI({
overlayCSS:{backgroundColor:'blue'},
message:'正在处理，请等待。。。',
css:{
backgroundColor:'#F0FF00',
height:40
}
});
});
//停滞2秒
var a5 = $("a:eq(4)");
a5.click(function(){
$.blockUI({message:'Processing...'});
setTimeout($.unblockUI,2000);
});
//防止一个表单
var a6 = $("a:eq(5)");
a6.click(function(){
$.blockUI({message:$('#loginForm')});
});
//通知（Notification）
var a7 = $("a:eq(6)");
a7.click(function(){
$.growlUI('Hi','Have a nice day!');
});
//onBlock callback
a8 = $("a:eq(7)");
a8.click(function(){
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
alert('Page is now blocked; fadeIn complete');
}
});
});
//Theme
var a9 = $("a:last");
a9.click(function(){
$.blockUI(
{
theme:true,
title:'<p style="font-size:25px" mce_style="font-size:25px">This is your title<p>',
message:'<p style="font-size:22px;background-color:green;" mce_style="font-size:22px;background-color:green;">This is your message.</p>',
timeout:2000
}
);
});
});
</script>
</head>
<body>
<img alt="" id"Loading" src="images/Loading.gif" style="display:none">
<a href="#" mce_href="#">DEFAULT</a>
<a href="#" mce_href="#">自定义内容</a>
<a href="#" mce_href="#">自定义样式</a>
<a href="#" mce_href="#">蓝色背景</a>
<a href="#" mce_href="#">停滞2秒</a>
<a href="#" mce_href="#">放置一个表单</a>
<a href="#" mce_href="#">通知（Notification）</a>
<a href="#" mce_href="#">onBlock callback</a>
<a href="#" mce_href="#">Theme</a>
<div id="login" style="display:none" mce_style="display:none">
<form action="#" id="loginForm">
<table>
<thead>
<th>用户登录</th>
</thead>
<tr>
<td>用户名：</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
如果是ajax想提示一直加载的图标，官方有一句话：
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);在ajax执行前执行$.blockUI 在$.unblockUI后执行，这就会触发你定义的ajax提示框，如上述实例
相关推荐
Jquery全屏遮掩及加载条插件，使用： <script type="text/javascript" src="js/jquery-1.4.2.min.js"> <script type="text/javascript" src=...<script type="text/javascript" src="js/jquery.blockUI.js"></script>
下载jquery.blockUI.js 和 使用示例，解决层的问题。很好用。
The jQuery BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作[1] 。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM 中添加元素的方法来实现阻止用户...
最新的jquery.blockUI
等待数据加载jquery.BlockUI.js,有Demo 效果不错
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定...当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。
弹出框，旋转等待框用到的js，jQuery自带弹出框框架js
三个开发ajax会用到的东东,下载了肯定会用到的、
jquery.blockUI插件用法实例,欢迎下载。
附件包含jquery.blockUI.JS，将其添加进引用，即可使用。
NULL 博文链接：https://zhibin07.iteye.com/blog/1461736
blockUI.js jquery,网上看到的下载，真贵，很气愤，所以自己上传一份，方便大家下载
包含jquery-1.2.3.js和jquery.blockUI.js 博文链接：https://wl-ldy.iteye.com/blog/1038803
经过自己整理后 js、jquery实时显示时间的几种方法
上传滚动等待效果想必大家在很多场合都有见过吧，本文将介绍jquery.blockUI.js实现上传滚动等待效果，感兴趣的你可不要错过了哈，希望可以帮助到你