logo cosasdedevs

Ventanas emergentes con html y css

Ventanas emergentes con html y css

My Profile
Nov 02, 2019

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 queréis estar al tanto cada vez que suba nuevo contenido, podéis seguirme en mi Twitter donde os informaré cada vez que suba nuevos tutoriales.

Nos leemos 👋

3037 vistas

Nos tomamos en serio tu privacidad

Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si pulsas entendido aceptas su uso. Ver política de cookies.

🐍 Sígueme en Twitter

Si te gusta el contenido que subo y no quieres perderte nada, sígueme en Twitter y te avisaré cada vez que cree contenido nuevo 💪
Luego ¡Te sigo!