Fatal编程技术网
  • jquery/
  • JQuery透明对话框覆盖

JQuery透明对话框覆盖

jquery dom plugins

JQuery透明对话框覆盖,jquery,dom,plugins,Jquery,Dom,Plugins,有几个JQuery插件用于放置模式对话框并在对话框中显示dom元素。但我正在寻找一个对话框覆盖，它可以显示屏幕的某些部分，并且这些区域应该可以访问，而其他元素应该被阻止。为要显示的项目创建z索引，使其比覆盖的项目大 注意：请记住z-index是相对的，要小心使用。虽然我不喜欢推荐jQuery工具库，但您正在寻找的是一个“暴露”我已经准备了一个简单的插件来实现这一点。。。不确定您的需求的范围，但在此基础上构建应该不会太难 基本用法如下（请注意，如果选择器匹配多个元素，它只会屏蔽第一个元素）： 屏蔽

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

为要显示的项目创建z索引，使其比覆盖的项目大
注意：请记住z-index是相对的，要小心使用。

虽然我不喜欢推荐jQuery工具库，但您正在寻找的是一个“暴露”

我已经准备了一个简单的插件来实现这一点。。。不确定您的需求的范围，但在此基础上构建应该不会太难

基本用法如下（请注意，如果选择器匹配多个元素，它只会屏蔽第一个元素）：

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

$("#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 );

（函数（$）{
$.fn.mask=函数（）{
这是；
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）；//右
addMask（maskOffset.left，0，maskWidth，maskOffset.top）；//top
addMask（maskOffset.left，maskOffset.top+maskHeight，maskWidth，totalHeight-（maskOffset.top+maskHeight））；//底部
var btn=$（“”）；
$（“正文”）。附加（btn）；
css（{位置：“绝对”，zIndex:9999，顶部：（maskOffset.top+maskHeight+5），左侧：（maskOffset.left+maskWidth-btn.outerWidth（true））；
点击（函数（）{$（this）.unmask（）；}）；
归还这个；
};
$.fn.unmask=函数（）{
$（“.mask”）.fadeOut（函数（）{$（this.remove（）；}）；
};
函数addMask（x，y，w，h）{
变量掩码=$（“”）；
css（{位置：“绝对”，zIndex:9999，宽度：w，高度：h，顶部：y，左侧：x，显示：“无”}）；
//注释掉这一行并替换为“div.mask”上的css样式，如果您想自定义
css（{backgroundColor:#000”，不透明度：0.3，过滤器：“alpha（不透明度=30）”）；
$（“正文”）。附加（掩码）；
mask.fadeIn（）；
//单击（函数（）{$（this）.unmask（）；}）；
}
})（jQuery）；
编辑：面板尺寸的错误修复，添加了淡入/淡出&现在，如果您在“被遮罩”区域外单击，将删除遮罩区域有一个“取消”按钮来删除遮罩

编辑2：

我使用插件。允许您阻止整个页面或单个元素。

Alconja的回答比这更优雅，这实际上更像是一个演示，但您可以在这里看到发生了什么。叠加是一个包含八个块的栅格，中间块是暴露的形状区域

确保使用Firebug或Chrome控制台检查元素，以查看元素的显示方式和css样式的应用

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


正文：
正文：
正文：
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#包装纸{
最小高度：100%；
填充：0；
保证金：0；
溢出：自动；
}
#试验{
背景：ddd；
保证金：0自动；
填充：0；
宽度：330px；
}
#试验室{
背景：#ffa；
利润率：20px；
填充：20px；
}
.覆盖{
背景：dda；
不透明度：.6；
位置：绝对位置；
z指数：1000；
}
功能设置覆盖（顶部、左侧、宽度、高度）{
var screenwidth=parseInt（$（'body'）.width（））；
var screenheight=parseInt（$（'body'）.height（））；
var topleft=[0,0，left，top]；
$（''）。附于（'正文'）；
var topmiddle=[0，左，宽，顶]；
$（''）。附于（'正文'）；
var topright=[0，左+宽，屏幕宽度左-宽，上]；
$（''）。附于（'正文'）；
var centerleft=[top，0，left，height]；
$（''）。附于（'正文'）；
var centerright=[顶部、左侧+宽度、屏幕宽度、左侧宽度、高度]；
$（''）。附于（'正文'）；
var bottomleft=[顶部+高度，0，左侧，屏幕高度-顶部高度]；
$（''）。附于（'正文'）；
var bottommiddle=[顶部+高度，左侧，宽度，屏幕高度顶部高度]；
$（''）。附于（'正文'）；
var bottomright=[顶部+高度，左侧+宽度，屏幕宽度左侧宽度，屏幕高度顶部高度]；
$（''）。附于（'正文'）；
}
$（文档）.ready（函数（）{
$（'input[type=“text”]”）。焦点（函数（）{
$this=$（this.parent（）；
$（'input[value=“Undo”]”）。单击（）；
套印(
parseInt（$this.offset（）.top），
parseInt（$this.offset（）.left），
parseInt（$this.outerWidth（）），
parseInt（$this.outerHeight（））
);
});
$（'input[value=“Undo”]”）。单击（函数（）{
$（'.overlay'）.remove（）；
});
});

为什么是出于好奇？作者似乎已经失去兴趣，不再支持图书馆了。谢谢Alconja。这太棒了！谢谢你的帮助！还想问一下，我们是否可以使覆盖模式覆盖。只有当点击叠加上的按钮时，叠加才会消失？@Manoj-更新了代码，使其有一个取消按钮（见更新的小提琴演示版）。。。这就是你的意思吗？是的，太完美了！谢谢Alconja 
<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();        
    });
});