example - panel colapsable jquery

(jquery) ¿Apaga toda la pantalla y resalta una sección de la página?

Question

Como se muestra en la captura de pantalla a continuación. ¡Estoy bastante seguro de que alguien ha hecho esto antes! =)

El círculo es una ventaja, sería muy feliz con una solución que permite resaltar un "div" dado

Answer 1

¿Qué pasa con el uso de la propiedad CSS de esquema ?

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

esto aplica un esquema muy grande en entradas enfocadas con transición de fundido.

Ejemplo:

Answer 2

Mira el plugin Expose de jQuery Tool . Eso es probablemente lo que quieres.

Answer 3

Reproduje el violín de @ mVChr para resaltar una casilla una vez que se hace clic en un botón diferente. Actualmente estoy usando esto para resaltar un campo de entrada una vez que se hace clic en un botón de inicio de sesión en un nuevo sitio.

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

Ejemplo modificado basado en el código de @ 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;
}

Answer 4

Vea un ejemplo de lo siguiente aquí →

No es necesario un complemento. Esto se puede lograr con muy poco código jQuery, mostrando una superposición de apagón con el div seleccionado en un índice z encima de él:

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

De acuerdo con el siguiente HTML y CSS ... simplemente agregue la clase de expose a cualquier elemento que desee aislado al hacer clic:

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

Ver ejemplo →

Answer 5

5 años desde que se realizó la pregunta , pero puede ayudar a las personas que llegan desde Google

Desarrollé un complemento para este tema

Puede obtenerlo de: Hop on Github

Déjame saber tus comentarios.