Ejercicios: style
2. Ejercicio: cambiar color body
3. Ejercicio Lightbox
Usaremos los siguientes estilos:
#black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.7);
}
/*La capa lightbox estará dentro de la capa black_overlay*/
#lightbox{
margin: 100px auto 0 auto;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
overflow: auto;
}
Usaremos:
document.querySelector('#black_overlay').style.display="block"
Detectar cuando pulsamos fuera.
window.addEventListener('click', function(e){
const lightbox = document.querySelector('#lightbox');
const black_overlay = document.querySelector('#black_overlay');
if (!lightbox.contains(e.target)){
hide();
}
});Será necesario detener la propagación del evento o la capa se ocultará después de hacerse visible:
const show = e => {
e.stopPropagation();
document.querySelector('#black_overlay').style.display = 'block'
}4. Ejercicio: Slider
Para poder hacer el slider, utilizaremos la siguiente distribución de capas.
