jQuery弹出层BlockUI的用法(包括登陆界面)(一)

例子一：

<script type="text/java script" src="Scripts/jquery-1.4.1.js">
<script type="text/java script" src="Scripts/jquery.blockUI.js">
<script type="text/java script">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI();
setTimeout($.unblockUI, 2000);
});
});

例子二：

<script type="text/java script" src="Scripts/jquery-1.4.1.js">
<script type="text/java script" src="Scripts/jquery.blockUI.js">
<script type="text/java script">
$(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 type="text/java script" src="Scripts/jquery-1.4.1.js">
<script type="text/java script" src="Scripts/jquery.blockUI.js">
<script type="text/java script">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI({
message: '',
css: {
border: 'none', // 无边界
width:"20px", // 中间框框的宽度
top:"50%", // 高居中
left:"50%" // 左居中
}
});
setTimeout($.unblockUI, 2000);
});
});

例子四：

<script type="text/java script" src="Scripts/jquery-1.4.1.js">
<script type="text/java script" src="Scripts/jquery.blockUI.js">
<script type="text/java script">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI({
message: $('#loginForm')
});
});

$('#btnReset').click(function () {
$.unblockUI();
});

$('#btnLogin').click(function () {
location.href ="default.aspx";
});
});

例子五：

// 当有ajax请求时，当加载信息较慢时，会显示该等待图片，带来良好的用户体验
$(document).ajaxStart(function () {
$.blockUI({
message: '',
css: {
width: "20px", // 宽度小一点
top: "50%",
left: "50%"
}
});
});

$(document).ajaxStop(function () {