1. 遮挡整个页面

直接调用 $.blockUI(), 即可锁定整个页面, 并提示信息:

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

要解锁只需要简单地调用 unblockUI():

$.unblockUI();

2. 遮挡部分(某个元素)

对一个 jQuery DOM 对象调用 blockUI 方法, 便可锁定该对象的显示区域, 如 div 块.

$('#my_div').blockUI();

3. 显示登录窗口(模式窗口)

bockUI 函数的参数对象的 message 字段, 可以接受任意的 HTML 代码, 或者某个 DOM 对象. 我们可以这样实现, 生成一个隐藏的登录表单, 当用户点击”登录”链接时, 对整个页面调用 blockUI(), 并把登录表单作为参数传递, 即可实现一个登录窗口:

$('#login_link').click(function() {
	$.blockUI({ message: $('#loginForm') });
});

4. 自动隐藏的气泡提示信息

$.growlUI('操作成功!', '您的评论已经成功保存! 感谢您的参与!');

如果你需要更强大的气泡提示功能, 可以试试这个插件: jGrowl.

5. 自定义样式

jQuery blockUI 提供的默认样式, 你可以在每一次调用 blockUI() 函数时进行修改. 如果你觉得这样比较麻烦的话, 可以直接修改库文件 jquery.blockUI.js, 修改 $.blockUI.defaults 对象相关的代码即可.

jQuery blockUI 项目主页: http://jquery.malsup.com/block/

Related posts:

1. jQuery延时绑定事件(lazy-bind)
2. 获取动态加载的图片大小的正确方法
3. [转]300+Jquery, CSS, MooTools 和 JS的导航菜单
4. 强大的纯JS数据图工具-flot
5. Wordpress开发指南