Как показано на скриншоте ниже. Я почти уверен, что кто-то сделал это раньше! =)
Круг является бонусом, был бы очень доволен решением, которое позволяет выделять данный "div"
Как показано на скриншоте ниже. Я почти уверен, что кто-то сделал это раньше! =)
Круг является бонусом, был бы очень доволен решением, которое позволяет выделять данный "div"
See example of the following here →
Нет необходимости в плагине. Это может быть выполнено с очень маленьким кодом jQuery, показывающим наложение затемнения с выбранным div с индексом z над ним:
$('.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;
}
Посмотрите jQuery Tool Expose plugin. Это, вероятно, то, что вы хотите.
Как насчет использования свойства 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 ;
}
это относится к очень большому контуру сфокусированных входов с переходом на постепенный переход.
Пример:
5 лет с момента запроса вопроса, но это может помочь людям, прибывающим из Google
Я разработал плагин для этого вопроса,
Вы можете получить его от: Hop on Github
Сообщите мне свои отзывы.
Я играл с скриптом @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;
}