根据以下截图。我相信有人以前做过这个!=)
圆圈只是额外奖励,如果有一种解决方案可以突出显示给定的“div”,我将非常高兴。
根据以下截图。我相信有人以前做过这个!=)
圆圈只是额外奖励,如果有一种解决方案可以突出显示给定的“div”,我将非常高兴。
无需插件。使用非常少的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;
}
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 ;
}
看看jQuery工具的暴露插件。那可能是你想要的。
我利用 @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');
});
});
<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;
}
#overlay
的背景更改为#000
并使用fadeTo(300, 0.3)
也可以使其在IE中正常工作(至少在我测试的IE8中是这样)。 - HChen