jQuery遮罩插件 jQuery.blockUI.js

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

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

阻止用户对页面的交互：$.blockUI();
自定义信息阻塞UI：$.blockUI({ message: '

Just a moment...

' });
自定义样式阻塞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: '

Processing

',
css: { border: '3px solid #a00' }
});

 

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

 

简单的模态对话框

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

　　

Would you like to contine?.

　　
　　

 

 

转载自：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

 

转载于:https://www.cnblogs.com/liuwt365/p/7891971.html