jQuery BlockUI Plugin概述:
jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://www.oschina.net/js/2012/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/min/jquery.blockUI.min.js"></script>
<title>jquery block ui插件遮罩效果</title>
<style type="text/css">
#testblock {
height: 400px;
width: 600px;
background-color: #D8D1D1;
}
</style>
<script>
// unblock when ajax activity stops
//$(document).ajaxStop($.unblockUI);
$(document).ready(function() {
$('#pageDemo0').click(function() {
$.blockUI();
});
$('#pageDemo1').click(function() {
$('#testblock').block();
});
$('#pageDemo2').click(function() {
$('#testblock').block({ message: '<h1><img src="http://static.oschina.net/uploads/space/2014/0430/115223_oFLD_1163935_thumb.gif" /> Just a moment...</h1>' });
});
$('#pageDemo3').click(function() {
$('#testblock').block({ css: { backgroundColor: '#f00', color: '#fff' } });
});
$('#pageDemo4').click(function() {
$('#testblock').block({ message: $('#domMessage') });
});
$('#showDialog').click(function() {
$('#testblock').block({ message: $('#question'), css: { width: '275px' } });
});
$('#unblockButton').click(function() {
$('#testblock').unblock()
})
$('#yes').click(function() {
// update the block message
$('#testblock').block({ message: "<h1>Remote call in progress...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click(function() {
$('#testblock').unblock();
return false;
});
});
</script>
</head>
<body>
<input class="demo" id="pageDemo0" type="button" value="block hole page">
<input class="demo" id="pageDemo1" type="button" value="Default Message">
<input class="demo" id="pageDemo2" type="button" value="Custom Message">
<input class="demo" id="pageDemo3" type="button" value="Custom Style">
<input class="demo" id="pageDemo4" type="button" value="DOM Element as Message">
<input id="showDialog" type="button" value="Show Dialog">
<input id="unblockButton" type="button" value="Unblock">
</br>
<div id="domMessage" style="display:none;">
<h1>We are processing your request. Please be patient.</h1>
</div>
</br>
<div id='testblock'>
</div>
</br>
<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>
</body>
</html>