(jquery) 关闭整个屏幕并突出显示页面的一部分？

Posted 2023-03-05

【中文标题】(jquery) 关闭整个屏幕并突出显示页面的一部分？

【英文标题】：(jquery) Blackout the entire screen and highlight a section of the page?

【发布时间】：2011-07-20 22:39:22

【问题描述】：

根据下面的屏幕截图。我很确定以前有人这样做过！ =)

圆圈是一个奖励，如果有一个允许突出显示给定“div”的解决方案，我会非常高兴

【参考方案1】：

看看jQuery Tool's Expose plugin。这可能就是你想要的。

【讨论】：

该 URL 在此日期已失效：2013-02-28

@Purefan 看起来他们放弃了域名并将项目转移到 Github jquerytools.github.io/documentation/toolbox/expose.html

【参考方案2】：

See example of the following here →

不需要插件。这可以用非常少的 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;

See example →

【讨论】：

又短又甜！通过将#overlay 的背景更改为#000 并使用fadeTo(300, 0.3) 将使其在IE 中也能正常工作（至少是我正在测试的IE8）。

谢谢我使用“位置：固定”来阻止人们滚动离开它

这并不总是那么容易。如果您对此有疑问，请阅读“堆叠上下文”philipwalton.com/articles/what-no-one-told-you-about-z-index

请记住，这不适用于子元素。

@Paul 的链接很棒 - 我被目标元素所吸引，它包含在不透明度

【参考方案3】：

一旦单击不同的按钮，我就会使用@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;

【参考方案4】：

如何使用 outline 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 ;

这会在带有淡入淡出过渡的焦点输入上应用一个非常大的轮廓。

例子：

【讨论】：

我很高兴看到这个答案并对其进行了测试 (jsfiddle.net/mkormendy/mhc4obm9) 有两个小警告： 1. 大纲的大小需要大于页面滚动； 2. 将过渡更改为“outline .3s”会在单击元素外部时淡出过渡。

【参考方案5】：

自提出问题 5 年后，但它可能会帮助来自 google 的人

我已经为此开发了一个插件，

您可以从：Hop on Github获取它

让我知道您的反馈。