<html>
<head>
<meta charset="utf-8">
<style>
* { padding:0;
margin:0px;
box-sizing: border-box;
}
html { scroll-behavior: smooth;
}
article { padding:20px;
}
#layer1 { background-color: yellow;
}
#layer2 { background-color: blue;
}
#layer3 { background-color: red;
}
button { padding:10px 20px;
}
.moveUp { display:none;
position: absolute;
width:100%;
transition: all 0.5s ease-out;
overflow: hidden;
height:0;
}
.moveUp>div { padding:20px;
}
</style>
</head>
<body>
<article>
<h1>titulo pagina</h1>
<div>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
</div>
<button id="button1">Mostrar capa1</button>
<button id="button2">Mostrar capa2</button>
<div>
<a href="#" id="link1">Pulsar para ver la capa 3</a>
</div>
</article>
<div id="layer1" class="moveUp">
<div>
<h2>contenido de la capa 1</h2>
<p>Pulsa en cualquier lugar para cerrar la capa</p>
</div>
</div>
<div id="layer2" class="moveUp">
<div>
<h2>contenido de la capa 2</h2>
<p><button>Cerrar</button></p>
</div>
</div>
<div id="layer3" class="moveUp">
<div>
<h2>contenido de la capa 3</h2>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
<div><a href="#">Cerrar</a></div>
</div>
</div>
</body>
</html>
<script>
class layersToMoveUp { constructor() { self.layers=[];
window.onresize = this.resize;
}
/**
* Function que esconde la capa y devuelve un objeto
* con dos funciones, una para mostrar la capa y otra
* funcion para esconderla
*
* @param {string} id *
* @return {object} objeto con dos funciones para * mostrar y ocultar la capa
*/
setLayer(element) { const layer=document.getElementById(element);
layers.push(layer);
this.resize();
return { show: () => { document.querySelector("body").scrollTo(0,0); layer.style.top=0;
layer.scrollTop=0;
layer.style.height=document.querySelector("body").scrollHeight > layer.scrollHeight ? document.querySelector("body").scrollHeight+"px" : layer.scrollHeight+"px"; },
hide: () => { layer.style.top=document.querySelector("body").clientHeight+"px"; layer.style.height="0px";
}
}
}
/**
* Función que se ejecuta cada vez que se añade una nueva
* capa o se modifica el tamaño de la ventana. Posiciona
* las capas en la parte inferior de la ventana
*/
resize() { // posicionamos las capas en la parte inferior de la ventana
layers.forEach(el => { if (el.style.height=="" || el.style.height=="0px") { el.style.display="none";
el.style.top=document.querySelector("body").clientHeight+"px"; el.style.height=0;
el.style.display="block";
}
});
}
}
const m=new layersToMoveUp();
const l1=m.setLayer("layer1");document.getElementById("button1").onclick=l1.show;document.getElementById("layer1").onclick=l1.hide;
const l2=m.setLayer("layer2");document.getElementById("button2").onclick=l2.show;document.querySelector("#layer2 button").onclick=l2.hide;
const l3=m.setLayer("layer3");document.getElementById("link1").onclick=l3.show;document.querySelector("#layer3 a").onclick=l3.hide;
</script>
Comentarios sobre la versión: 1 (0)
No hay comentarios