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

Question

截至下面的截图.我很确定有人之前做过这件事!=)

圆圈是一个奖励,对于允许突出显示给定"div"的解决方案非常满意

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

见例→

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

这对于具有淡入淡出过渡的聚焦输入应用了非常大的轮廓.

例:

Answer 3

看看jQuery Tool的Expose插件.这可能就是你想要的.