界面遮罩层例子

关键字：界面遮罩层例子


一、自己写的遮罩层例子

附件遮罩层.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);


更多相关知识：

http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html