遮罩层实现

最新推荐文章于 2021-09-10 20:24:05 发布

u022731937

最新推荐文章于 2021-09-10 20:24:05 发布

阅读量111

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/u022731937/article/details/84511383

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

[url]http://www.oschina.net/code/snippet_98719_7689[/url]
[url]http://hi.baidu.com/bluelotus7/item/b8f467f4e3a982dd6225d269[/url]


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