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>