jquery blockUI插件
这个jQuery插件能够为页面上的任意元素添加遮层，阻止用户操作。具体可以用于制作提示等待响应的对话框。当要执行某个较长操作时候，通过 blockUI来阻止当前用户继续操作。
html页面<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>blockUI测试</title>
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
/*例子1*/
$('#btnOpen').click(function () {
$.blockUI();
setTimeout($.unblockUI, 2000);
});
/*例子2*/
$('#btnOpen2').click(function () {
$.blockUI({
message:"请稍候",
css: {
border: 'none',
padding: '15px',
backgroundColor: 'yellow',
width:"300px",
opacity: .5,
color: 'Red'
}
});
setTimeout($.unblockUI, 2000);
});
/*例子3*/
$('#btnOpen3').click(function () {
$.blockUI({
message: '<image src="default.jpg"></image>',
css: {
border: 'none', // 无边界
width:"20px", // 中间框框的宽度
top:"30%", // 高居中
left:"30%" // 左居中
}
});
setTimeout($.unblockUI, 5000);
});
/*例子4*/
$('#btnOpen4').click(function () {
$.blockUI({
message: $('#loginForm')
});
});
$('#btnReset').click(function () {
$.unblockUI();
});
$('#btnLogin').click(function () {
location.href ="index.html";
});
});
</script>
blockUI测试
<form id="form1" runat="server">
<div>
<input id="btnOpen" type="button" value="Open" />
</div>
</form>
<form id="form2" runat="server">
<div>
<input id="btnOpen2" type="button" value="Open2" />
</div>
</form>
<form id="form3" runat="server">
<div>
<input id="btnOpen3" type="button" value="Open3"/>
</div>
</form>
<form id="form4" runat="server">
<div>
<input id="btnOpen4" type="button" value="Open4"/>
<div 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>
<input id="btnLogin" type="button" value="登陆" />
</td>
<td>
<input id="btnReset" type="reset" value="取消登陆" />
</td>
</tr>
</table>
</div>
</div>
</form>