有几个JQuery插件可以放置一个模态对话框并在对话框中显示一个dom元素。但是我正在寻找一个可以显示屏幕某些部分的对话框覆盖图，这些区域应该是可访问的，而其他元素应该被阻止。
答案 0 :(得分：5)
我已经整理了一个简单的插件来执行此操作...不确定您的要求的范围，但不应该太难以构建它。
基本用法如下（请注意，如果你的选择器匹配多个元素，它只会掩盖第一个元素）：
$("#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 );
修改：错误修复了面板尺寸，添加了淡入/淡出＆amp;现在删除掩码如果你点击外面你被掩盖区域有一个取消按钮来删除掩码。
修改2 ：JsFiddle demo
答案 1 :(得分：0)
为要显示的项目制作z-index，使其大于覆盖的项目 注意：请记住，z-index是相对的，请小心。
答案 2 :(得分：0)
虽然我讨厌建议使用jQuery Tools库，但您所寻找的内容称为“公开”http://flowplayer.org/tools/demos/toolbox/expose/index.html
答案 3 :(得分：0)
我使用BlockUI插件。让您阻止整个页面或单个元素。
答案 4 :(得分：0)
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();
});
});