各種樣式、方法等，來源：http://qincidong.blog.163.com/blog/static/1646672192010634317555/
<!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>
<td>密碼：</td>
<td><input type="password" name="pwd"></td>
<tr align="center">
<td colspan="2">
<input type="submit" value="登入"/>
</td>
</table>
</form>
</div>
</BODY>
</HTML>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)