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>