jQuery遮罩插件 jQuery.blockUI.js

jQuery BlockUI插件可以在不锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会阻止用户在页面进行的操作，直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。

使用jQuery BlockUI，首先需要添加插件js源码的引用：

<script type="text/javascript" src="http://malsup.github.io/min/jquery.blockUI.min.js"></script>

阻止用户对页面的交互：$.blockUI();
自定义信息阻塞UI：$.blockUI({ message: '<h1><img src="busy.gif" .> Just a moment...</h1>' });
自定义样式阻塞UI：$.blockUI({ css: { backgroundColor: '#f00'; color: '#fff' } });
解除对页面的遮罩：$.unblockUI();
使用缺省设置对所有的ajax请求都使用UI遮罩，添加下面的语句：$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

blockUI对页面中的元素进行遮罩，而非遮罩整个页面

$('div.test').block({ message: null });

$('div.test').block({
message: '<h1>Processing</h1>',
css: { border: '3px solid #a00' }
});

$('div.test').unblock();

简单的模态对话框

$.blockUI({ message: $('#question'), css: { '275px' } });

<div id="question" style="display:none; cursor: default">
　　<h1>Would you like to contine?.</h1>
　　<input type="button" id="yes" value="Yes" />
　　<input type="button" id="no" value="No" />
</div>

转载自：http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/

附：官方DEmo地址：http://malsup.com/jquery/block/#demos

点击遮罩自动关闭

1、$('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
2、$.blockUI({onOverlayClick: $.unblockUI});

说明：方法1为通用，方法2为回调函数，2.7.0支持。

下载地址：

http://download.csdn.net/download/liuwt999/10133257