(jquery) Czy chcesz zaciemnić cały ekran i podświetlić sekcję strony?

Question

Jak na zrzucie ekranu poniżej. Jestem prawie pewien, że ktoś to zrobił wcześniej! =)

Krąg jest premia, byłby bardzo zadowolony z rozwiązania, które umożliwia podświetlanie danego „div”

Answer 1

See example of the following here →

Nie potrzeba wtyczki. Można to osiągnąć bardzo mało kodu jQuery, przedstawiający nakładkę blackout z wybranym div na z-index nad nim:

$('.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'); 
    }); 
}); 

według następującego HTML & CSS ... wystarczy dodać klasę expose dowolnego Element chcesz samodzielnie na kliknięcia:

<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 →

Answer 2

Spójrz na jQuery Tool's Expose plugin. Właśnie tego chcesz.

Answer 3

grałem off @ skrzypce mVChr do podkreślenia jedno pole raz inna kliknięciu przycisku. Obecnie używam tego do podświetlenia pola wprowadzania po kliknięciu przycisku logowania w nowej witrynie.

$('.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; 
} 

Answer 4

Co na temat korzystania z zarys właściwości 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 ; 
} 

dotyczy to bardzo dużego zarysu skupionych danych wejściowych z przejściami zanikania.

Przykład:

Answer 5

5 lat od pytano, ale może pomóc ludziom, przybywających z google

Mam opracowane plugin dla tej sprawy ,

Można uzyskać od: Hop on Github

Daj znać swoją opinię.