JQuery See through dialog overlay

Question

There are several JQuery plugins to put a modal dialog and show a dom element in the dialog. But I'm looking for a dialog overlay which can show some portion of the screen and these region should be accessible, while other elements should be blocked.

Answer 1

I've put together a simple plugin to do this... Not sure the extent of your requirements, but it shouldn't be too hard to build on it.

Basic usage is as follows (note that if your selector matches multiple elements, it will just mask the first):

$("#yourDiv").mask();

Masking another element will unmask other masked elements or you can explicitly unmask things with:

$("#yourDiv").unmask();

Plugin code:

(function( $ ){
    $.fn.mask = function() {
        this.unmask();

        var totalWidth = $(document).width();
        var totalHeight = $(document).height();

        var target = this.first();
        var maskWidth = target.outerWidth();
        var maskHeight = target.outerHeight();
        var maskOffset = target.offset();

        addMask(0, 0, maskOffset.left, totalHeight);                                                                    //left
        addMask(maskOffset.left + maskWidth, 0, totalWidth - (maskOffset.left + maskWidth), totalHeight);                 //right
        addMask(maskOffset.left, 0, maskWidth, maskOffset.top);                                                         //top
        addMask(maskOffset.left, maskOffset.top + maskHeight, maskWidth, totalHeight - (maskOffset.top + maskHeight));    //bottom

        var btn = $("<input type='button' value='Cancel' class='mask' />");
        $("body").append(btn);
        btn.css({ position: "absolute", zIndex: 9999, top: (maskOffset.top + maskHeight + 5), left: (maskOffset.left + maskWidth - btn.outerWidth(true)) });
        btn.click(function() { $(this).unmask(); });

        return this;
    };
    $.fn.unmask = function() {
        $(".mask").fadeOut(function() { $(this).remove(); });
    };

    function addMask(x, y, w, h) {
        var mask = $("<div class='mask'></div>");
        mask.css({ position: "absolute", zIndex: 9999, width: w, height: h, top: y, left: x, display: "none" });
        //comment out this line & replace with css styles on 'div.mask' if you want to customise
        mask.css({ backgroundColor: "#000", opacity: 0.3, filter: "alpha(opacity=30)" });
        $("body").append(mask);
        mask.fadeIn();
        // mask.click(function() { $(this).unmask(); });
    }
})( jQuery );

Edit: Bug fix with the panel dimensions, added a fade in/out & now removes the mask if you click outside you're masked region has a cancel button to remove the mask.

Edit 2: JsFiddle demo