遮罩简单实现
使用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="遮罩容易实现">
?? ?</div>
?
?
??</body>
</html>
