1.点击弹出层以外的区域关闭弹出层
$(document).ready(function() {
$('#demo9').click(function() {
$.blockUI();
$('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
});
});
2.blockUI弹出层定位
$(document).ready(function() {
$('#demo5').click(function() {
$.blockUI({
message: $('#displayBox'),
css: {
top: ($(window).height() - 400) /2 + 'px',
left: ($(window).width() - 400) /2 + 'px',
width: '400px'
}
});
setTimeout($.unblockUI, 2000);
});
});
3.在关闭blockUI的时候执行某个操作
$(document).ready(function() {
$('#demo8').click(function() {
$.blockUI();
setTimeout(function() {
$.unblockUI({
onUnblock: function(){ alert('onUnblock'); }
});
}, 2000);
});
});
4.弹出层自动定时,到时间后关闭
$(document).ready(function() {
$('#demo10').click(function() {
$.blockUI({
message: '<h1>Auto-Unblock!</h1>',
timeout: 2000
});
});
});
5.关闭blockUI时有淡出效果
$(document).ready(function() {
$('#demo11').click(function() {
$.blockUI({
message: $('div.growlUI'),
fadeIn: 700,
fadeOut: 700,
timeout: 2000,
showOverlay: false,
centerY: false,
css: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .6,
color: '#fff'
}
});
});
});
6.blockUI淡入,加载完成时执行某个函数
$(document).ready(function() {
$('#demo14').click(function() {
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
alert('Page is now blocked; fadeIn complete');
}
});
});
});
参考:http://jquery.malsup.com/block/#demos