参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/
blockUI.html
blockUI.html中的jquery都直接引用自互联网,本地不需要
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>blockUI</title>
<style type="text/css"> </style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.io/min/jquery.blockUI.min.js"></script> <script type="text/javascript">
$(document).ready(function() { $('#showDivButton').click(function() {
//建议使用这种指定div的锁,因为它可以对指定div进行解锁,灵活性在此
$('#showDiv').block({ message: $("#paying"), css: { width: '400px' } });
//而下面的这种通用div只能有一个锁,比较死板,不过大多数情景一个锁可以已经满足了
//$.blockUI({ message: $("#paying"), css: { width: '400px' ,height:'300px'} });
}); $('#yes').click(function() {
// update the block message,再弹个窗
$.blockUI({ message: "<h1>Remote call in progress...</h1>" }); $.ajax({
url: 'http://www.baidu.com',
cache: false,
complete: function() {
// unblock when remote call returns
//解锁指定div的锁
$('#showDiv').unblock();
$.unblockUI();
}
});
}); $('#no').click(function() {
//解锁指定div的锁
$('#showDiv').unblock();
//$.unblockUI();
return false;
}); });
</script>
</head>
<body>
<div id="showDiv"> <input id="showDivButton" type="button" value="显示遮罩" /> <div id ="otherDiv1" style="width:100%;height:70%;background-color:blue">
我是一个无关紧要的div
</div>
<div id ="showDiv" style="width:100%;height:70%;background-color:red">
我是showDiv: paying遮罩的容器
</div>
<div id ="otherDiv2" style="width:100%;height:70%;background-color:blue">
我也是一个无关紧要的div
</div>
<div style="width:100%;height:50%;background-color:green"> <div id="paying" style="display:none; cursor: default">
<table width="400" border="10" align="center">
<tr bgcolor="#006666">
<th height="35" colspan="2"><div align="left" class="STYLE1">等待支付宝支付</div></th>
</tr>
<tr>
<td height="50" colspan="2"><span class="STYLE4">请您在新打开的网上银行页面进行支付，支付完成前请不要关闭窗口</span></td>
</tr>
<tr>
<td width="100" height="50" align="center"><input name="success" type="button" id="yes" value="已完成支付" /></td>
<td width="100" height="50" align="center"><input name="fail" type="button" id="no" value="支付遇到问题,关闭" /></td>
</tr>
</table>
</div> </div>
</div>
</body>
</html>