(jquery) 遮光整个屏幕并突出显示页面的一部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5399442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
(jquery) Blackout the entire screen and highlight a section of the page?
提问by ming yeow
As per screenshot below. I am pretty sure someone has done this before! =)
按照下面的截图。我很确定以前有人这样做过！=)
The circle is a bonus, would be very happy with a solution that allows highlighting of a given "div"
圆圈是一个奖励，对允许突出显示给定“div”的解决方案非常满意
回答by mVChr
See example of the following here →
No need for a plugin. This can be accomplished with very little jQuery code, showing a blackout overlay with the selected div at a z-index above it:
不需要插件。这可以用很少的 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');
});
});
According to the following HTML & CSS... just add the exposeclass to any element you want isolated on click:
根据以下 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;
}
回答by caoshouse
What about using the outline CSS property?
使用大纲 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 ;
}
this applies a very large outline on focused inputs with fade transition.
这在带有淡入淡出过渡的聚焦输入上应用了非常大的轮廓。
Example:
例子：
回答by Haochi
Look at jQuery Tool's Expose plugin. That's probably what you want.
查看jQuery Tool 的 Expose 插件。这可能就是你想要的。
回答by amd
5 years since the question was asked, but it may help people arriving from google
问这个问题已经 5 年了，但它可能会帮助从谷歌过来的人
I've developed a plugin for this matter,
我为此开发了一个插件，
You can get it from: Hop on Github
你可以从：跳上 Github
Let me know your feedback.
让我知道您的反馈。
回答by casemorton
I played off @mVChr's fiddle to highlight one box once a different button is clicked. I'm currently using this to highlight an entry field once a login button is clicked on a new site.
一旦单击了不同的按钮，我就会使用@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');
});
});
Modified example based on @mVChr's code
<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;
}
