Jquery弹出层BlockUI的用法(包括登陆界面)
例子一：
<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">
<div>
<input id="btnOpen" type="button" value="Open" />
</div>
</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">
<div>
<input id="btnOpen" type="button" value="Open" />
</div>
</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">
<div>
<input id="btnOpen" type="button" value="Open"/>
</div>
</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">
<div>
<input id="btnOpen" type="button" value="Open"/>
<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>
<asp:Button ID="btnLogin" runat="server" Text="登陆" />
</td>
<td>
<input id="btnReset" type="reset" value="取消登陆" />
</td>
</tr>
</table>
</div>
</div>
</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();
});
详细参见：http://www.malsup.com/jquery/block/#demos