<head runat="server">
<title></title>
<script type="text/javascript" src="https://www.linuxidc.com/Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="https://www.linuxidc.com/Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI();
setTimeout($.unblockUI, 2000);
});
});
</script>
</head>
<body>
<form runat="server">
<div>
<input type="button" value="Open" />
</div>
</form>
</body>
</html>
例子二：
<head runat="server">
<title></title>
<script type="text/javascript" src="https://www.linuxidc.com/Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="https://www.linuxidc.com/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 runat="server">
<div>
<input type="button" value="Open" />
</div>
</form>
</body>
</html>
例子三：
<head runat="server">
<title></title>
<script type="text/javascript" src="https://www.linuxidc.com/Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="https://www.linuxidc.com/Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI({
message: '<image src="https://www.linuxidc.com/images/wait.gif"></image>',
css: {
border: 'none', // 无边界
width:"20px", // 中间框框的宽度
top:"50%", // 高居中
left:"50%" // 左居中
}
});
setTimeout($.unblockUI, 2000);
});
});
</script>
</head>
<body>
<form runat="server">
<div>
<input type="button" value="Open"/>
</div>
</form>
</body>
</html>
例子四：
<head runat="server">
<script type="text/javascript" src="https://www.linuxidc.com/Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="https://www.linuxidc.com/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 runat="server">
<div>
<input type="button" value="Open"/>
<div>
<table>
<tr>
<td colspan="2">用户名:<input type="text" /></td>
</tr>
<tr>
<td colspan="2">密码:<input type="text" /></td>
</tr>
<tr>
<td>
<asp:Button runat="server" Text="登陆" />
</td>
<td>
<input type="reset" value="取消登陆" />
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
例子五：
// 当有ajax请求时，当加载信息较慢时，会显示该等待图片，带来良好的用户体验
$(document).ajaxStart(function () {
$.blockUI({
message: '<image src="https://www.linuxidc.com/images/wait.gif"></image>',
css: {
width: "20px", // 宽度小一点
top: "50%",
left: "50%"
}
});
});
$(document).ajaxStop(function () {
// 直接调用，无延时
$.unblockUI();
});