界面遮罩层例子

关键字：界面遮罩层例子


一、自己写的遮罩层例子

附件遮罩层.rar为普通js界面遮罩层例子。



二、jQuery遮罩层例子（引入附件 jquery.zip中的两个插件）

1、下面一句话即可搞定
$.blockUI({ message: '<h1><img  src="busy.gif" /> Just a moment...</h1>',css: { backgroundColor: '#f00', color: '#fff'} });

2、解除锁定

$.unblockUI();


全屏锁屏例子：
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>




局部锁屏例子：

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