遮罩层实现

liumayulingyan

浏览: 155869 次
性别:
来自: 上海

最近访客更多访客>>

flymeqaqflyme

笨笨0913小窝

xdonex

sunbojie

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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();
                    }
                    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();
                    });
                }
            });
        })();

<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()">关闭遮罩</a>
<a href="#" onclick="$(document).mask('全部遮罩').click(function(){$(document).unmask()})">全部遮罩</a>

</body>

-------------------------------------

/* 
 *  Document   : mask 1.1
 *  Created on : 2011-12-11, 14:37:38
 *  Author     : GodSon
 *  Email      : wmails@126.com
 *  Link       : www.btboys.com 
 *  
 */
 
(function($){
    function init(target,options){
        var wrap = $(target);
		if($("div.mask",wrap).length) wrap.mask("hide");
		
        wrap.attr("position",wrap.css("position"));
		wrap.attr("overflow",wrap.css("overflow"));
        wrap.css("position", "relative");
		wrap.css("overflow", "hidden");
        
        var maskCss = {
            position:"absolute",
            left:0,
            top:0,
			cursor: "wait",
            background:"#ccc",
            opacity:options.opacity,
            filter:"alpha(opacity="+options.opacity*100+")",
            display:"none"
        };
        
        var maskMsgCss = {
            position:"absolute",
            width:"auto",
            padding:"10px 20px",
            border:"2px solid #ccc",
            color:"white",
			cursor: "wait",
            display:"none",
            borderRadius:5,
            background:"black",
            opacity:0.6,
            filter:"alpha(opacity=60)"
        };
		var width,height,left,top;
		if(target == 'body'){
			width = Math.max(document.documentElement.clientWidth, document.body.clientWidth);
			height = Math.max(document.documentElement.clientHeight, document.body.clientHeight);
		}else{
			width = wrap.outerWidth() || "100%";
			height = wrap.outerHeight() || "100%";
		}
        $('<div class="mask"></div>').css($.extend({},maskCss,{
            display : 'block',
            width : width,
            height : height,
            zIndex:options.zIndex
        })).appendTo(wrap);

		var maskm= $('<div class="mask-msg"></div>').html(options.maskMsg).appendTo(wrap).css(maskMsgCss);
		
		if(target == 'body'){
			left = (Math.max(document.documentElement.clientWidth,document.body.clientWidth) - $('div.mask-msg', wrap).outerWidth())/ 2;
			if(document.documentElement.clientHeight > document.body.clientHeight){
				top = (Math.max(document.documentElement.clientHeight,document.body.clientHeight)  - $('div.mask-msg', wrap).outerHeight())/ 2;
			}else{
				top = (Math.min(document.documentElement.clientHeight,document.body.clientHeight)  - $('div.mask-msg', wrap).outerHeight())/ 2;
			}
			
		}else{
			left = (wrap.width() - $('div.mask-msg', wrap).outerWidth())/ 2;
			top = (wrap.height() - $('div.mask-msg', wrap).outerHeight())/ 2;
		}
		
        maskm.css({
            display : 'block',
            zIndex:options.zIndex+1,
            left : left,
            top :  top
        });
        
        setTimeout(function(){
            wrap.mask("hide");
        }, options.timeout);
            
        return wrap;
    }
       
    $.fn.mask = function(options){   
        if (typeof options == 'string'){
            return $.fn.mask.methods[options](this);
        }
        options = $.extend({}, $.fn.mask.defaults,options);
        return init(this,options);
    };
    $.mask = function(options){  
        if (typeof options == 'string'){
            return $.fn.mask.methods[options]("body");
        }
        options = $.extend({}, $.fn.mask.defaults,options);
        return init("body",options);
    };
	
	$.mask.hide = function(){
		$("body").mask("hide");
	};
	
    $.fn.mask.methods = {
        hide : function(jq) {
            return jq.each(function() {
                var wrap = $(this);
                $("div.mask",wrap).fadeOut(function(){
                    $(this).remove();
                });
                $("div.mask-msg",wrap).fadeOut(function(){
                    $(this).remove();
                    wrap.css("position",  wrap.attr("position"));
					wrap.css("overflow", wrap.attr("overflow"));
                });
            });
        }
    };
    
    $.fn.mask.defaults = {
        maskMsg:'\u52a0\u8f7d……',
        zIndex:100000,
        timeout:30000,
        opacity:0.6
    };
})(jQuery);

分享到：

openldap | 关于sql中ANY、SOME、ALL关键字

2013-12-11 14:25
浏览 659
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

遮罩层实现

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

遮罩层实现

评论

发表评论

相关推荐

XmlHttpRequest用法

javascript操作SELECT中option大全

jQuery实现表格行的动态增加与删除(改进版)

最近访客更多访客>>