JQuery See through dialog overlay

There are several JQuery plugins to put a modal dialog and show a dom element in the dia开发者_运维百科log. 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.

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

Make z-index for items you want to show bigger than the one that overlay has NOTE: Remember that z-index is relative, and be careful with it.

Although I hate to suggest the jQuery Tools library, what you're looking for is called an "expose" http://flowplayer.org/tools/demos/toolbox/expose/index.html

I use BlockUI plug in. Lets you block the whole page, or individual elements.

Alconja's answer is more elegant than this, and this is really meant more as a demonstration, but you can see here what's going on. The overlay is a grid with eight blocks, with the middle block being the form area that is exposed.

Make sure and inspect the elements with Firebug or Chrome console to see how the elements are displayed and the css styles are applied.

<div id="wrapper">
    <div id="test">
        <div>
            Text: <input type="text"/> <input type="button" value="Undo"/>
        </div>
        <div>
            Text: <input type="text"/> <input type="button"value="Undo"/>
        </div>
        <div>
            Text: <input type="text"/> <input type="button"value="Undo"/>
        </div>
    </div>
</div>

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  min-height: 100%;
  padding: 0;
  margin: 0;
  overflow: auto;
}
#test {
  background: #ddd;
  margin: 0 auto;
  padding: 0;
  width: 330px;
}
#test div {
  background: #ffa;
  margin: 20px;
  padding: 20px;
}
.overlay {
  background: #dda;
  opacity: .6;
  position: absolute;
  z-index: 1000;
}

function setOverlay(top, left, width, height) {
    var screenwidth = parseInt($('body').width());
    var screenheight = parseInt($('body').height());
    var topleft = [0, 0, left, top];
    $('<div class="overlay" style="top: '+topleft[0]+'px; '+
                  'left: '+topleft[1]+'px; '+
                  'width: '+topleft[2]+'px; '+
                  'height: '+topleft[3]+'px;"></div>').appendTo('body');
    var topmiddle = [0, left, width, top];
    $('<div class="overlay" style="top: '+topmiddle[0]+'px; '+
                  'left: '+topmiddle[1]+'px; '+
                  'width: '+topmiddle[2]+'px; '+
                  'height: '+topmiddle[3]+'px;"></div>').appendTo('body');
    var topright = [0, left+width, screenwidth-left-width, top];
    $('<div class="overlay" style="top: '+topright[0]+'px; '+
                  'left: '+topright[1]+'px; '+
                  'width: '+topright[2]+'px; '+
                  'height: '+topright[3]+'px;"></div>').appendTo('body');
    var centerleft = [top, 0, left, height];
    $('<div class="overlay" style="top: '+centerleft[0]+'px; '+
                  'left: '+centerleft[1]+'px; '+
                  'width: '+centerleft[2]+'px; '+
                  'height: '+centerleft[3]+'px;"></div>').appendTo('body');
    var centerright = [top, left+width, screenwidth-left-width, height];
    $('<div class="overlay" style="top: '+centerright[0]+'px; '+
                  'left: '+centerright[1]+'px; '+
                  'width: '+centerright[2]+'px; '+
                  'height: '+centerright[3]+'px;"></div>').appendTo('body');
    var bottomleft = [top+height, 0, left, screenheight-top-height];
    $('<div class="overlay" style="top: '+bottomleft[0]+'px; '+
                  'left: '+bottomleft[1]+'px; '+
                  'width: '+bottomleft[2]+'px; '+
                  'height: '+bottomleft[3]+'px;"></div>').appendTo('body');
    var bottommiddle = [top+height, left, width, screenheight-top-height];
    $('<div class="overlay" style="top: '+bottommiddle[0]+'px; '+
                  'left: '+bottommiddle[1]+'px; '+
                  'width: '+bottommiddle[2]+'px; '+
                  'height: '+bottommiddle[3]+'px;"></div>').appendTo('body');
    var bottomright = [top+height, left+width, screenwidth-left-width, screenheight-top-height];
    $('<div class="overlay" style="top: '+bottomright[0]+'px; '+
                  'left: '+bottomright[1]+'px; '+
                  'width: '+bottomright[2]+'px; '+
                  'height: '+bottomright[3]+'px;"></div>').appendTo('body');
}
$(document).ready(function(){
    $('input[type="text"]').focus(function(){
        $this = $(this).parent();
        $('input[value="Undo"]').click();
        setOverlay(
            parseInt($this.offset().top),
            parseInt($this.offset().left),
            parseInt($this.outerWidth()),
            parseInt($this.outerHeight())
        );
    });
    $('input[value="Undo"]').click(function(){
        $('.overlay').remove();        
    });
});

http://jsfiddle.net/userdude/3nRLJ/