参考 : 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: { '400px' } }); //而下面的这种通用div只能有一个锁,比较死板,不过大多数情景一个锁可以已经满足了 //$.blockUI({ message: $("#paying"), css: { '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="100%;height:70%;background-color:blue"> 我是一个无关紧要的div </div> <div id ="showDiv" style="100%;height:70%;background-color:red"> 我是showDiv: paying遮罩的容器 </div> <div id ="otherDiv2" style="100%;height:70%;background-color:blue"> 我也是一个无关紧要的div </div> <div style="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>