jquery blockUI插件

這個jQuery插件可以爲頁面上的任意元素添加遮層，阻止用戶操做。具體能夠用於製做提示等待響應的對話框。當要執行某個較長操做時候，經過 blockUI來阻止當前用戶繼續操做。

html頁面 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>blockUI測試</title> <script type="text/javascript" src="./jquery-1.7.1.min.js"></script> <script type="text/javascript" src="./jquery.blockUI.js"></script> <script type="text/javascript"> $(document).ready(function () {             /*例子1*/             $('#btnOpen').click(function () {                 $.blockUI();                 setTimeout($.unblockUI, 2000);             });             /*例子2*/             $('#btnOpen2').click(function () {                 $.blockUI({                     message:"請稍候",                     css: {                     border: 'none',                     padding: '15px',                     backgroundColor: 'yellow',                     width:"300px",                     opacity: .5,                     color: 'Red'                    }                 });                 setTimeout($.unblockUI, 2000);             });             /*例子3*/             $('#btnOpen3').click(function () {                 $.blockUI({                     message: '<image src="default.jpg"></image>',                     css: {                         border: 'none',                   // 無邊界                         width:"20px",                     // 中間框框的寬度                         top:"30%",                        // 高居中                         left:"30%"                        // 左居中                    }                 });                 setTimeout($.unblockUI, 5000);             });             /*例子4*/             $('#btnOpen4').click(function () {                 $.blockUI({                     message: $('#loginForm')                 });             });             $('#btnReset').click(function () {                 $.unblockUI();             });             $('#btnLogin').click(function () {                location.href ="index.html";             });         }); </script> blockUI測試 <form id="form1" runat="server">     <div>         <input id="btnOpen" type="button" value="Open" />     </div> </form> <form id="form2" runat="server">     <div>     <input id="btnOpen2" type="button" value="Open2" />     </div> </form> <form id="form3" runat="server">     <div>         <input id="btnOpen3" type="button" value="Open3"/>     </div>  </form>  <form id="form4" runat="server">     <div>         <input id="btnOpen4" type="button" value="Open4"/>         <div id="loginForm" style="display:none; cursor:default">             <table style="text-align:right">                 <tr>                     <td colspan="2">用戶名:<input id="txtUserName" type="text" /></td>                 </tr>                  <tr>                     <td colspan="2">密碼:<input id="Text1" type="text" /></td>                 </tr>                 <tr style="text-align:center">                     <td>                         <input id="btnLogin" type="button" value="登錄" />                    </td>                     <td>                         <input id="btnReset" type="reset" value="取消登錄" />                     </td>                 </tr>             </table>         </div>     </div> </form>