jquery blockui 遮罩【转】
参考 : 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 >
<input type="button" value="显示遮罩" />
<div id ="otherDiv1" >
我是一个无关紧要的div
</div>
<div id ="showDiv" >
我是showDiv: paying遮罩的容器
</div>
<div id ="otherDiv2" >
我也是一个无关紧要的div
</div>
<div >
<div >
<table width="400" 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" value="已完成支付" /></td>
<td width="100" height="50" align="center"><input name="fail" type="button" value="支付遇到问题,关闭" /></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
- 上一篇 »Jquery+CSS实现遮罩效果
- 下一篇 »CSS实现 全屏 遮罩 - 勤学如春起之苗