[SOLUCIONADO] Efecto aparecer y desaparecer capa

#1 (**permalink**) 25/10/2016, 12:22

Hola,

estoy probando a hacer unos botones y que al clickear sobre ellos aparezca una capa lateralmente. Eso me sale bien, el problema que tengo es que no logro hacer que una vez que la capa está desplegada, el fondo del resto de la página se ponga con un color de fondo y que al clickear sobre cualquier lado se cierre dicha capa. También me gustaría saber si es posible hacer que con unos botones que tienen la misma clase , se pueda abrir la capa con un contenido u otro dependiendo de cuál se clicke. Mi código es:

Código:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		button{
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
		.capa{
			width: 30vw;
			height: 100vh;
			position: absolute;
			top: 0;
			right: 0;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<button class="tarea">1</button>
	<button class="tarea">2</button>
	<button class="tarea">3</button>
	<div class="capa">probando</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.capa').hide();
    	$('.tarea').click(function() {
        $(".capa").animate({
            width: "toggle"
       });
   });
});
</script>
</body>
</html>

Silenn · #2 (**permalink**) 25/10/2016, 19:24

Para la capa de fondo puedes agregar otro div <div class="modal-fondo"></div>, ya con su css.
Aparece primero

Código Javascript:

Ver originalvar counter = 1;
    if(counter == 1){
        $('.tarea').click(function() {
            $('.modal-fondo').fadeIn();
            $('.capa').fadeOut();
            setTimeout(function(){$(".capa").animate({left: '0'})},150);
            counter = 2;
        });
    }else{
        $('.modal-fondo').click(function(){
            $('.modal-fondo').fadeOut();
            $(".capa").animate({left: '-100%'});
            setTimeout(function(){$(".capa").remove()},150); //Se quita "capa" del documento para que no cause problemas, esto es opcional si no se volviera a abrir, si no es así puedes eliminar esta línea.
            counter = 1;
        });
    }

#3 (**permalink**) 26/10/2016, 17:34

Buenas Silenn,

he estado probando con el código que me has pasado y no me funcionaba, de todos modos, trasteando un buen rato, he logrado hacer que me funcione. El código que he utilizado es (decir que .wrapper es la capa que envuelve a los tres botones):

Código Javascript:

Ver original$(document).ready(function() {
    $('.tarea').click(function() {
        $(".capa").animate({
            width: "show"
        });
        $('.wrapper').prepend('<div class="show"></div>');
    });
});
//si clickamos fuera se cierra el desplegable anterior
$(document).mouseup(function (e){
    var container = $(".capa");
    if (!container.is(e.target) && container.has(e.target).length === 0){
        $(".capa").animate({
            width: "hide"
        });
        $('.show').remove();
    }
});

De esta forma me funciona correctamente,
muchas gracias!!!