JQuery查看对话框覆盖

Question

有几个JQuery插件可以放置一个模态对话框并在对话框中显示一个dom元素.但我正在寻找一个可以显示屏幕某些部分的对话框覆盖图,这些区域应该是可访问的,而其他元素应该被阻止.

Answer 1

我已经整理了一个简单的插件来执行此操作...不确定您的要求的范围,但它不应该太难以构建它.

基本用法如下(请注意,如果您的选择器匹配多个元素,它将只掩盖第一个元素):

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

屏蔽另一个元素将取消屏蔽其他屏蔽元素,或者您可以使用以下方法显式取消屏蔽:

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

插件代码:

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

编辑:错误修复了面板尺寸,添加了淡入/淡出现在如果你点击外面你是蒙面区域,删除面具 有一个取消按钮来删除掩码.

编辑2:JsFiddle演示