例子一：
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI();
setTimeout($.unblockUI, 2000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
<input id="btnOpen" type="button" value="Open" />
</p>
</form>
</body>
</html>
例子二：
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI({
message:"請稍候",
css: {
border: 'none',
padding: '15px',
backgroundColor: 'yellow',
width:"300px",
opacity: .5,
color: 'Red'
}
});
setTimeout($.unblockUI, 2000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
<input id="btnOpen" type="button" value="Open" />
</p>
</form>
</body>
</html>
例子三：
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI({
message: '<image src="images/wait.gif"></image>',
css: {
border: 'none', // 無邊界
width:"20px", // 中間框框的寬度
top:"50%", // 高居中
left:"50%" // 左居中
}
});
setTimeout($.unblockUI, 2000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
<input id="btnOpen" type="button" value="Open"/>
</p>
</form>
</body>
</html>
例子四：
<head runat="server">
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI({
message: $('#loginForm')
});
});
$('#btnReset').click(function () {
$.unblockUI();
});
$('#btnLogin').click(function () {
location.href ="default.aspx";
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
<input id="btnOpen" type="button" value="Open"/>
<p 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>
<asp:Button ID="btnLogin" runat="server" Text="登陸" />
</td>
<td>
<input id="btnReset" type="reset" value="取消登陸" />
</td>
</tr>
</table>
</p>
</p>
</form>
</body>
</html>
例子五：
// 當有ajax請求時，當加載信息較慢時，會顯示該等待圖片，帶來良好的用戶體驗
$(document).ajaxStart(function () {
$.blockUI({
message: '<image src="images/wait.gif"></image>',
css: {
width: "20px", // 寬度小一點
top: "50%",
left: "50%"
}
});
});
$(document).ajaxStop(function () {
// 直接調用，無延時
$.unblockUI();
});
詳情 https://www.malsup.com/jquery/block/#demos
作者 徐越的專欄