jquery blockUI插件实现遮罩层

jquery.blockUI.js的使用示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>   <TITLE> New Document </TITLE>   <META NAME="Generator" CONTENT="EditPlus">   <META NAME="Author" CONTENT="">   <META NAME="Keywords" CONTENT="">   <META NAME="Description" CONTENT=""> <script language=javascript src="js/jquery.js"></script> <script language=javascript src="js/jquery.blockUI.js"></script> <script language=javascript> $(function(){    //检测引入的jquery.js是否正确。    alert("jquery 没有问题!");    //默认样式    var a1 = $("a:eq(0)");    a1.click(function(){     a1.css("color","green");     $.blockUI();    });    //自定义内容    var a2 = $("a:eq(1)");    a2.click(function(){     $.blockUI({message:'正在处理,请等待...'});    });    //自定义样式    var a3 = $("a:eq(2)");    a3.click(function(){     $.blockUI({ css: {       border:'solid green 2px',       backgroundColor:'blue'       }     });    });      //蓝色背景    var a4 = $("a:eq(3)");    a4.click(function(){     $.blockUI({      overlayCSS:{backgroundColor:'blue'},      message:'正在处理,请等待。。。',      css:{       backgroundColor:'#F0FF00',       height:40      }      });    });    //停滞2秒    var a5 = $("a:eq(4)");    a5.click(function(){     $.blockUI({message:'Processing...'});     setTimeout($.unblockUI,2000);    });

   //防止一个表单    var a6 = $("a:eq(5)");    a6.click(function(){     $.blockUI({message:$('#loginForm')});      });

   //通知(Notification)    var a7 = $("a:eq(6)");    a7.click(function(){     $.growlUI('Hi','Have a nice day!');    });

   //onBlock callback    a8 = $("a:eq(7)");    a8.click(function(){     $.blockUI({              fadeIn: 1000,              timeout:    2000,              onBlock: function() {                  alert('Page is now blocked; fadeIn complete');              }     });    });

   //Theme    var a9 = $("a:last");    a9.click(function(){     $.blockUI(      {       theme:true,       title:'<p style="font-size:25px">This is your title<p>',       message:'<p style="font-size:22px;background-color:green;">This is your message.</p>',       timeout:2000      }      );    }); }); </script> </HEAD>

<BODY> <a href="#">DEFAULT</a> <a href="#">自定义内容</a> <a href="#">自定义样式</a>      <a href="#">蓝色背景</a> <a href="#">停滞2秒</a> <a href="#">放置一个表单</a> <a href="#">通知(Notification)</a> <a href="#">onBlock callback</a> <a href="#">Theme</a>

<div id="login" style="display:none">    <form action="#" id="loginForm">     <table>      <thead>       <th>用户登录</th>      </thead>      <tr>       <td>用户名:</td>       <td><input type="text" name="name"></td>      </tr>      <tr>       <td>密码:</td>       <td><input type="password" name="pwd"></td>      </tr>      <tr align="center">       <td colspan="2">        <input type="submit" value="登录"/>       </td>      </tr>     </table>    </form> </div> </BODY> </HTML>

你可能感兴趣的:(jquery)