博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jquery 遮罩

Posted on 2010-04-28 16:10  李望生  阅读(896)  评论(2)    收藏  举报

测试

div遮罩 关闭div遮罩 全部遮罩

 

 

代码 
<html>
<head>
    <style>
        body
        {
            font-size: 12px;
        }
    </style>

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js " type="text/javascript"></script>

    <script type="text/javascript">
        (function() {
            $.extend($.fn, {
                mask: function(msg, maskDivClass) {
                    this.unmask();
                    // 参数 
                    var op = {
                        opacity: 0.8,
                        z: 10000,
                        bgcolor: '#ccc'
                    };
                    var original = $(document.body);
                    var position = { top: 0, left: 0 };
                    if (this[0] && this[0] !== window.document) {
                        original = this;
                        position = original.position();
                    }
                    // 创建一个 Mask 层，追加到对象中 
                    var maskDiv = $('<div class="maskdivgen"> </div>');
                    maskDiv.appendTo(original);
                    var maskWidth = original.outerWidth();
                    if (!maskWidth) {
                        maskWidth = original.width();
                    }
                    var maskHeight = original.outerHeight();
                    if (!maskHeight) {
                        maskHeight = original.height();
                    }
                    maskDiv.css({
                        position: 'absolute',
                        top: position.top,
                        left: position.left,
                        'z-index': op.z,
                        width: maskWidth,
                        height: maskHeight,
                        'background-color': op.bgcolor,
                        opacity: 0
                    });
                    if (maskDivClass) {
                        maskDiv.addClass(maskDivClass);
                    }
                    if (msg) {
                        var msgDiv = $('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">' + msg + '</div></div>');
                        msgDiv.appendTo(maskDiv);
                        var widthspace = (maskDiv.width() - msgDiv.width());
                        var heightspace = (maskDiv.height() - msgDiv.height());
                        msgDiv.css({
                            cursor: 'wait',
                            top: (heightspace / 2 - 2),
                            left: (widthspace / 2 - 2)
                        });
                    }
                    maskDiv.fadeIn('fast', function() {
                        // 淡入淡出效果 
                        $(this).fadeTo('slow', op.opacity);
                    })
                    return maskDiv;
                },
                unmask: function() {
                    var original = $(document.body);
                    if (this[0] && this[0] !== window.document) {
                        original = $(this[0]);
                    }
                    original.find("> div.maskdivgen").fadeOut('slow', 0, function() {
                        $(this).remove();
                    });
                }
            });
        })(); 
    </script>

</head>
<body style="width: 100%">
    测试
    <div id="test" style="width: 200px; height: 100px; border: black 1px solid;">
    </div>
    <a href="#" onclick="$('#test').mask('DIV层遮罩')">div遮罩</a> <a href="#" onclick="$('#test').unmask()">
        关闭div遮罩</a> <a href="#" onclick="$(document).mask('全屏遮罩').click(function(){$(document).unmask()})">
            全部遮罩</a>
</body>
</html>