Diseñar ventana modal responsive

¿Qué es una ventana modal o Popup?

Un ventana modal es una capa que se muestra por encima del contenido visual de una página web generalmente activado por una acción como un click o temporizador.

Muestra un contenido con una o varias opciones a elegir por el usuario. 

¿Cómo diseñar una ventana modal?

Para diseñar una ventana es necesario dominar lo siguiente:

• Maquetación en HTML
• Diseño en CSS
• Interacción en Javascript

Maquetación HTML del POPUP

<div class="page">
        <a href="#" class="boton" id="btnAbrirModal">ABRIR VENTANA</a>
    </div>

    <div class="fondo_transparente" id="ventanaModal">
        <div class="modal">
            <div class="modal_cerrar" id="btnCerrarModal">
                <span>x</span>
            </div>
            <div class="modal_titulo">VENTANA MODAL</div>
            <div class="modal_mensaje">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit, nam? Minus nihil temporibus, minima reprehenderit, rem explicabo earum nemo debitis, maxime deserunt quidem. Quia odit quae voluptate nobis sit beatae!</p>
            </div>
            <div class="modal_botones">
                <a href="#" class="boton">COMPARTIR</a>
                <a href="#" class="boton">ACEPTAR</a>
            </div>
        </div>
    </div>  

Ahora veamos el código CSS para la ventana

• Traemos una fuente para mejorar el aspecto visual de la letras de nuestra ventana modal con css

• Body con margen 0 y declaración de la fuente con la tipografía Roboto
• La clase page muestra como fondo una imagen desde la carpeta img, centramos completamente el contenido que disponga en este caso un link que hace las veces de botón, usamos para ello flexbox.
• Creamos un fondo translucido. dentro del cual diseñamos la caja para el contenido de la ventana.
• El botón cerrar lo colocamos en la parte superior derecho de la ventana modal usando posicionamiento css

                @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body{
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
.page{
    background: url(img/image.jpg) center;
    background-size: contain;
    height: 100vh; 
    display: flex;          
    justify-content: center;
    align-items: center;
}
.fondo_transparente{
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.226);
    position: absolute;
    height: 100vh;
    width: 100%;
    display: none;    
}
.modal{
    background: linear-gradient(0deg,white 70%, crimson 30%);
    width: 600px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 30px;

}
.modal_cerrar{
    background: white;
    position: absolute;
    right: -20px;
    color: crimson;
    top: -20px;
    width: 40px;
    height: 40px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.modal_titulo{
    color: white;
    font-size: 40px;
}
.modal_mensaje{            
   padding: 10px 30px;
}
.modal_botones{      
    width: 100%;    
   background: whitesmoke;
   border-top:whitesmoke 1px;
   padding-top: 20px;
   display: flex;
   justify-content: space-evenly;
}

.boton{
    background: white;
    padding: 8px 30px;
    color: crimson;
    text-decoration: none;
    border-radius: 25px;
    border:1px solid crimson
}
.boton:hover{
    background: crimson;
    color: white;
}

y por último el código Javascript

Este código sencillo permite visualizar la ventana modal al hacer click en el boton identificado con el id btnabrir, y lo podemos cerrar con el boton con la clase modal_cerrar.

 btnAbrirModal.addEventListener("click",e=>{
            ventanaModal.style.display = "block"
            return false
        })
btnCerrarModal.addEventListener("click",e=>{
            ventanaModal.style.display = "none"
            return false
        })

Diseño visual de la ventana modal con CSS y JS

Diseño del botón que levanta la ventana modal, la funcionalidad del botón radica en que escuchará el evento click lo que disparará la apertura de la ventana modal

Diseño de la ventana modal con CSS, se mostrará por encima del contenido de la página web, dentro podremos colocar varios contenidos como textos, imágenes, videos, etc... cuenta con un botón para cerrar la ventana.

Y bueno llegamos al final, obviamente podemos sacar muchos diseños y variantes con colores distintos, tamaños, contenidos, etc. Espero que sea de ayuda a sus proyectos web. Nos vemos en próximos tutoriales de diseño con CSS u hojas de estilos.

Leido 34570 veces