DIV mask implemented in JavaScript/CSS

Mask.html

Mask.js

(function ($) {
    $.fn.Mask = function () {

    if ($(this).find('.Mask').length > 0) return null;
        var __ctrl = $(this)[0];
        if (__ctrl.tagName != 'DIV') return null;

        var containerCssPaddingTop = $(__ctrl).css('padding-top');
        var containerCssPaddingRight = $(__ctrl).css('padding-right');
        var containerCssPaddingBottom = $(__ctrl).css('padding-bottom');
        var containerCssPaddingLeft = $(__ctrl).css('padding-left');

        $(__ctrl).css('position', 'relative');
        $(__ctrl).css('overflow', 'hidden');

        var mask = '';
        $(__ctrl).prepend(mask);

        var m = $(this).find('.Mask');
        var mc = $(this).find('.MaskContent');

        m.css('margin-top', '-' + containerCssPaddingTop);
        m.css('margin-right', '-' + containerCssPaddingRight);
        m.css('margin-bottom', '-' + containerCssPaddingBottom);
        m.css('margin-left', '-' + containerCssPaddingLeft);

        // The 16 just comes from the fact that the image displayed is 32x32
        mc.css('left', m.width()/2 - 16 + "px");

        var toReturn = {
            RemoveMask: function () {
                m.remove();
            }
        };

        return toReturn;
    };
})(jQuery);

mask.css

.Mask {
    background-image: -webkit-radial-gradient(center, ellipse farthest-side, #FFFFFF 0%, #EEEEEE 100%);
    height: 100%;
    opacity: 0.8;
    position: absolute;
    width: 100%;
    z-index: 4;    
}

.MaskContent {
    background: none;
    position: absolute;
    top: 30%;
    z-index: 5;
}

The real code I would like reviewed/criticized is in Mask.js and Mask.css

The idea is that this extends jQuery so you can block a div while it is being updated.

You would use it by running

v = $('#div1').Mask()

then, to remove it, one would do

v.RemoveMask();

The code looks fine to me. Just a couple minor points:

-
Why do you change the div's position to relative? If the function is called on a div with absolute positioning, it would mess up the layout. And you should revert the CSS changes on RemoveMask() to what they were when Mask() was called because the div's content might depend on a certain overflow value.

-
If the div changes size while masked, the image will no longer be horizontally centered. I would suggest using CSS instead of JS to center it:

.MaskContent {
  background: none;
  position: absolute;
  width: 32px;
  height: 32px;
  top: 30%;
  left: 50%;
  margin-left: -16px;
  z-index: 5;
}

-
Your mask background currently only supports webkit browsers; you should add the CSS3 variations for the other browsers.

StackExchange Code Review Q#19304, answer score: 2