Ventanas emergentes con html y css
Muchas veces tenemos que crear ventanas emergentes en nuestros sitios webs ya sea por notificaciones importantes, avisos de cookies o para que se suscriban a una newsletter. Esta misma semana me ha tocado pelearme con eso y, ya que me ha dado un buen dolor de cabeza (sobretodo centrar el div tanto vertical como horizontalmente) quiero hacer un tutorial para que no te tenga que pasar a ti 😉.
Para este ejemplo voy a usar el típico aviso de política de cookies que tendrá su mensaje, acceso a la página con la información sobre la política de cookies y el botón de aceptar para cerrar la ventana.
Lo primero que haremos será crear el código HTML, es bastante simple, un div principal que ocupará toda la pantalla y añadirá opacidad a la página, y otro div centrado que será el que contiene la información, el enlace y el botón.
<div class="window-notice" id="window-notice">
<div class="content">
<div class="content-text">Este sitio utiliza cookies para obtener la mejor experiencia en nuestra web.
<a href="#">Leer más.</a></div>
<div class="content-buttons"><a href="#" id="close-button">Aceptar</a></div>
</div>
</div>
Y ahora vamos a ponernos manos a la obra con el CSS:
.window-notice {
background: rgba(33, 41, 52, .85);
left: 0;
bottom: 0;
right: 0;
top: 0;
display: flex;
position: fixed;
z-index: 999;
}
En el background añadimos un color entre gris y negro y le damos una transparencia del 85%.
Left, bottom, right y top hará que el div ocupe toda la pantalla.
Display flex para indicar que es un elemento flexible.
Position fixed lo que hara es que si el usuario hace scroll la ventana se mantendrá fija.
Z-index es para que la ventana se mantenta por encima de cualquier otra al menos que tenga alguna otra ventana con un z-index más alto.
.window-notice .content {
background: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(33, 41, 52, .75);
box-sizing: content-box;
display: flex;
flex-direction: column;
margin: auto;
max-width: 600px;
min-width: 320px !important;
overflow: hidden;
position: relative;
width: 100%;
padding: 2rem;
font-size: 1.3rem;
}
Con flex-direction: column lo que haremos especificar que los elementos irán en columnas.
Margin auto nos ayudará a centrar el div tanto vertical como horizontalmente.
max-width: 600px, será el tamaño máximo del div y min-width: 320px !important; será el tamaño mínimo, esto lo que hará es que la ventana se ajuste de forma responsive, vamos que se adaptará tanto a PC como a móvil.
Con position: relative mantedremos la ventana dentro del div principal.
Con esto ya lo tendríamos, ahora solo necesitarías realizar los cambios necesarios a lo que necesites y adaptarla a tu web. En mi GitHub podéis descargar el proyecto si lo necesitáis.
Espero que este post te ayude y como siempre, te recomiendo seguirme en Twitter para estar al tanto de los nuevo contenido. Ahora también puedes seguirme en Instagram donde estoy subiendo tips, tutoriales en vídeo e información sobre herramientas para developers.
Por último os dejo mi guía para aprender a trabajar con APIs donde explico todo el funcionamiento de una API, el protocolo HTTP y veremos como construir una API con arquitectura REST.
Nos leemos 👋.