遮罩简单实现
使用jQuery插件blockUI达到遮罩，当然还有其他更炫的插件（thickBox,stanlemon等），在此不做描述。
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Block-UI (^_^)</title>
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="jQuery Block UI">
<!-- Dao ru xiang ying de bao: css,jQuery core,jQuery blockUI -->
<link rel="stylesheet" type="text/css" media="screen" href="ui/jquery-ui-1.7.2.redmond.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<style type="text/css">
input {
border: 1px groove #eee;
font-size: 12px;
}
button {
border: 1px groove #eee;
cursor: pointer;
}
div.growlUI {
background: url(./img/check.jpg) no-repeat 10px 10px
}
div.growlUI h1, div.growlUI h2 {
color: white;
padding: 5px 5px 5px 75px;
text-align: left
}
div.growlUI h2 {
font-size: medium
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
//login
$('#btnLogin').click(function() {
$.blockUI({ message: $('#login') });
//setTimeout($.unblockUI, 2000);
});
$('#btnLoginCancle').click(function() {
$.unblockUI('#login');
});
//-------------------------------------------
//wait
$('#btnWait').click(function() {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
setTimeout($.unblockUI, 2000);
});
//-------------------------------------------
//overlay
$('#btnOverlay').click(function() {
$.blockUI({ overlayCSS: { backgroundColor: '#336699' } });
setTimeout($.unblockUI, 2000);
});
//-------------------------------------------
//tall content
$('#btnTallContent').click(function() {
$.blockUI({
message: $('#tallContent'),
css: { top: '20%' }
});
setTimeout($.unblockUI, 2000);
});
//-------------------------------------------
//image box
$('#btnImageBox').click(function() {
$.blockUI({
message: $('#imageBox'),
css: {
top: ($(window).height() - 400) /2 + 'px',
left: ($(window).width() - 400) /2 + 'px',
width: '100px'
}
});
setTimeout($.unblockUI, 2000);
});
//--------------------------------------------
//none centered message
$('#btnNoneCentered').click(function() {
$.blockUI({
centerY: 0,
css: { top: '10px', left: '', right: '10px' }
});
setTimeout($.unblockUI, 2000);
});
//--------------------------------------------
//null message
$('#btnNullMessage').click(function() {
$.blockUI({ message: null });
setTimeout($.unblockUI, 2000);
});
//--------------------------------------------
//on unblock callback
$('#btnOnUnblock').click(function() {
$.blockUI();
setTimeout(function() {
$.unblockUI({
onUnblock: function(){
alert('useful when using fadeOut option as it is invoked when all the blocking elements have been removed)');
}
});
}, 2000);
});
//--------------------------------------------
//click overlay to block
$(document).ready(function() {
$('#btnClickOverlayToBlock').click(function() {
$.blockUI();
$('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
});
});
//--------------------------------------------
//auto-unblock: sets a timer to unblock after a specified timeout.
$('#btnAutoUnblock').click(function() {
$.blockUI({
message: '<h3>Auto-Unblock!</h3>',
timeout: 2000
});
});
//--------------------------------------------
//growl: the hard way.
//Maybe some style I cannot import from the office site, but the effect is the same as 'btnGrowlEasy'.
$('#btnGrowlHard').click(function() {
$.blockUI({
message: $('div.growlUI'),
fadeIn: 700,
fadeOut: 700,
timeout: 2000,
showOverlay: false,
centerY: false,
css: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .6,
color: '#fff'
}
});
});
//--------------------------------------------
//easy growl
$('#btnGrowlEasy').click(function() {
$.growlUI('Growl Notification', 'Have a nice day!');
});
//--------------------------------------------
//jQuery UI Theme
$('#btnUITheme').click(function() {
$.blockUI({
theme: true,
title: 'This is your title',
message: '<p>This is your message.</p>',
timeout: 2000
});
});
//--------------------------------------------
//onBlock callback
//this may occur error,but I don't know how to solve it.If you recognize that,please send a feedback,pengyou(^_^)!
$('#btnOnBlock').click(function() {
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
alert('Page is now blocked; fadeIn complete');
}
});
});
//--------------------------------------------
});
//-->
</script>
</head>
<body>
<!-- buttons -->
<button id="btnLogin">login</button>
<button id="btnWait">wait</button>
<button id="btnOverlay">overlay</button>
<button id="btnTallContent">tallContent</button>
<button id="btnImageBox">imageBox</button>
<button id="btnNoneCentered">noneCentered</button>
<button id="btnNullMessage">nullMessage</button>
<button id="btnOnUnblock">onUnblock</button>
<button id="btnClickOverlayToBlock">clickOverLayToBlock</button>
<button id="btnAutoUnblock">autoUnblock</button>
<button id="btnGrowlHard" title="Mei you xiao guo,but he btnGrowlEasy yi yang.">growlHard</button>
<button id="btnGrowlEasy" title="Tu pian ke neng chu bu lai,because yin yong de shi jue dui lu jing, hehe.">growlEasy</button>
<button id="btnUITheme">uiTheme</button>
<button id="btnOnBlock" title="It can occur CuoWu!">onBlock</button>
<!-- layers -->
<!-- login -->
<div id="login" style="display:none;border:1px solid #336699;">
Account: <input type="text"/><br/>
Password: <input type="password"/><br/>
<button>Enter</button> <button id="btnLoginCancle">Quit</button>
</div>
<!-- tall content -->
<div id="tallContent" style="display:none;border:1px solid #ee66FF;">
<h3>Sunny<br/>So<br/>Long</h3>
</div>
<!-- image box -->
<div id="imageBox" style="display:none;border:1px solid #CC66FF;">
<img src="http://img2.zol.com.cn/product/5/96/cejCWzKmTAw.jpg" width="300" height="200" alt="JiaFeiMao猫">
</div>
</body>
</html>