Diseñar ventana modal responsive

¿Cómo crear diseñar una ventana modal en HTML + CSS + JS?

Video Crear una Ventana Modal con CSS

Para diseñar necesitas maquetar las estructura HTML, aplicar reglas CSS para el diseño y Javascript para la interacción que el usuario espera en la web.

¿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. 

Puedes descargar el código fuente html+css+js de este tutorial en el link que esta más abajo

¿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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VENTANA MODAL CODEA</title>
</head>
<body>
    <div class="page">
        <a href="#" class="boton" id="btnabrir">ABRIR VENTANA</a>
    </div>

    <div class="fondo_transparente">
        <div class="modal">
            <div class="modal_cerrar">
                <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>   
</body>
</html>

 

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

 

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

        body{
            margin: 0;
            font-family: 'Roboto', sans-serif;
        }
        .page{
            background: url(img/foto.jpg) center;
            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;
        }
            
    </style>

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.

Script JS Ventana modal

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 del botón con css

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.

Diseño modal con CSS

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.

Para descargar el recurso de forma gratuita { crea una cuenta } gratis .

Descarga código fuente

ENTRAR PARA DESCARGAR 184

Redactado por: , Leido 14280 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021