（jQuery）如何让整个屏幕变黑并突出显示页面的一个部分？

Question

根据以下截图。我相信有人以前做过这个！=)

圆圈只是额外奖励，如果有一种解决方案可以突出显示给定的“div”，我将非常高兴。

- meow

Answer 1

点击此处查看以下示例 →

无需插件。使用非常少的jQuery代码即可实现此操作，显示一个黑色覆盖层，在其上方以较高的z-index显示选定的div：

$('.expose').click(function(e){
    $(this).css('z-index','99999');
    $('#overlay').fadeIn(300);
});

$('#overlay').click(function(e){
    $('#overlay').fadeOut(300, function(){
        $('.expose').css('z-index','1');
    });
});

根据下面的HTML和CSS...只需将expose类添加到您想要在单击时隔离的任何元素即可：

<div class="expose">Some content</div>
<textarea class="expose">Some content</textarea><br />
<input type="text" class="expose" value="Some content" /><br />
<div id="overlay"></div>

.expose {
    position:relative;
}

#overlay {
    background:rgba(0,0,0,0.3);
    display:none;
    width:100%; height:100%;
    position:absolute; top:0; left:0; z-index:99998;
}

查看示例 →

- mVChr

---

简短明了！将#overlay的背景更改为#000并使用fadeTo(300, 0.3)也可以使其在IE中正常工作（至少在我测试的IE8中是这样）。 - HChen

谢谢，我使用了“position: fixed”来防止人们能够滚动它。 - HaveAGuess

这并不总是那么容易。如果您在处理此问题时遇到困难，请阅读有关“堆叠上下文”的内容 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ - Paul

请注意，此方法不适用于子元素。 - MJB

@Paul的链接很棒 - 我被目标元素包含在不透明度小于1的情况中所困扰，因此它没有堆叠在覆盖层上方。将脚本添加到设置该元素的不透明度为1，并且它可以工作了。 - goodeye

Answer 2

使用轮廓线CSS属性怎么样？

input[type="search"] {
    -webkit-appearance: textfield;
    background:url('icons.png') #fff no-repeat 5px -601px;
    padding:0 10px 0 32px!important;
    width:168px;
    outline: 0px rgba(0,0,0,0) solid;
    transition: outline-color .3s
}
input[type="search"]:focus{
    z-index:1000;
    position:relative;
    border:1px solid #f60;
    outline: 5000px rgba(0,0,0,.8) solid ;
}

这个功能会在聚焦的输入框周围添加一个非常大的轮廓，并带有渐变的过渡效果。

例如：

- caoshouse

---

我很高兴看到这个答案，并用它进行了测试（http://jsfiddle.net/mkormendy/mhc4obm9/）。需要注意的是：1.轮廓线的大小必须大于页面滚动; 2.将转换改为“outline .3s”会使在元素外单击时淡出转换。 - Mike Kormendy

Answer 3

看看jQuery工具的暴露插件。那可能是你想要的。

- HChen

---

该URL在2013年02月28日已失效。 - Patrick Desjardins

@Purefan 看起来他们放弃了该域名，并将项目移至 Github http://jquerytools.github.io/documentation/toolbox/expose.html - HChen

Answer 4

自这个问题被提出已经五年了，但它可能会帮助从Google到达的人们。

我为此开发了一个插件，

您可以从以下获取Github上的Hop。 。

请告诉我您的反馈。

- amd

Answer 5

我利用 @mVChr 的小提琴来突出显示一个框，一旦单击不同的按钮。目前，我正在使用这个方法来突出显示一个登录按钮在一个新站点上被点击后的输入字段。

$('.expose').click(function(e){
    $('.lightbox').css('z-index','99999');
    $('#overlay').fadeIn(300);
});

$('#overlay').click(function(e){
    $('#overlay').fadeOut(300, function(){
        $('.expose').css('z-index','1');
    });
});

基于@mVChr代码的修改示例

<div class="buttonbox expose">When clicked</div>
<div class="lightbox expose">This box lights up</div><br /><br />
<div id="overlay"></div>

.buttonbox {     
    cursor:pointer;
    float:left;
    color:#1792C7;
    border: 1px solid #1792C7; 
    padding:10px 16px;
    background-color:transparent;
    -webkit-transition: background linear .3s; 
    -moz-transition: background linear .3s; 
    -ms-transition: background linear .3s; 
    -o-transition: background linear .3s; 
    transition: background linear .3s; 
}

.buttonbox:hover { 
    text-decoration: none; 
    color: #fff; 
    background-color: #1792C7; 
}

.lightbox {     
    background:#fff;
    border:1px solid #0d0d0d;
    color: #0d0d0d;
    cursor:pointer;
    float:left;
    margin:0px 0px 0px 5px; 
    padding:10px 16px;
    text-align:center;
}

.expose {
    position:relative;
}

#overlay {
    background:rgba(0,0,0,0.5);
    display:none;
    width:100%; height:100%;
    position:absolute; top:0; left:0; z-index:99998;
}

- casemorton