关键字：界面遮罩层例子
一、自己写的遮罩层例子
附件遮罩层.rar为普通js界面遮罩层例子。
二、jQuery遮罩层例子（引入附件 jquery.zip中的两个插件）
1、下面一句话即可搞定
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>',css: { backgroundColor: '#f00', color: '#fff'} });
2、解除锁定
$.unblockUI();
[color=red]全屏锁屏例子：[/color]
js代码：
$(function(){
$('#test').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});
$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>正在进行通信...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click($.unblockUI);
});
html代码：
<input id="test" type="submit" value="显示对话框" />
...
<div id="question" style="display:none; cursor: default">
<h1>你确信要继续么？.</h1>
<input type="button" id="确认" value="Yes" />
<input type="button" id="取消" value="No" />
</div>
[color=red]局部锁屏例子：[/color]
js代码：
$(function() {
$('#blockButton').click(function() {
$('#question').block({ message: null });
});
$('#blockButton2').click(function() {
$('#question').block({
message: '<h1>处理中...</h1>',
css: { border: '3px solid #a00' }
});
});
$('#unblockButton').click(function() {
$('#question').unblock();
});
});
html代码：
<input type="button" id="blockButton" value="blockButton" />
<input type="button" id="blockButton2" value="blockButton2" />
<input type="button" id="unblockButton" value="unblockButton" />
<div id="question" >
<input type="text" class="userText" value="nicole"/><br>
<input type="password" class="passText" value=" "/><br>
<input type="button" value="Yes" /><br>
<input type="button" value="No" /><br>
<input type="button" value="dddddddddddddddddddddddddddddd" /><br>
</div>
一些设置：
//设置遮罩层颜色
$.blockUI.defaults.overlayCSS.backgroundColor = '#ff0';
// 设置锁定时默认的提示信息（这里将覆盖jquery默认的提示消息）
//$.blockUI.defaults.message = "Please be patient... .......";
// 设置遮罩层更透明
$.blockUI.defaults.overlayCSS.opacity = '.2';
//如果要使用默认设置来同步所有的AJAX请求动作，代码如下：
$().ajaxStart($.blockUI).ajaxStop($.unblockUI);