<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="mask.js"></script>
        <link rel="stylesheet" type="text/css" href="mask.css">
        <div id="div1" style="margin: 5px; border: 1px solid red; height: 100px; width: 500px;"></div>
        <div id="div2" style="margin: 5px; border: 1px solid blue; height: 100px; width: 500px">
            <div id="div3" style="margin: 5px; border: 1px solid red; height: 88px; width: 235px; float:left;"></div>
            <div id="div4" style="margin: 5px; border: 1px solid green; height: 88px; width: 235px; float:left;"></div>


(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 = '<div class="Mask"><div class="MaskContent"><img src="PleaseWait.gif"/></div></div>';

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

        return toReturn;


.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

  • 4
    \$\begingroup\$ Quick comment: PascalCase is only for constructors which are meant to be called with new. All other methods should use camelCase. \$\endgroup\$
    – ANeves
    Commented Dec 4, 2012 at 19:04

1 Answer 1


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

  1. 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.

  2. 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;
  3. Your mask background currently only supports webkit browsers; you should add the CSS3 variations for the other browsers.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.