Diseñar ventana modal responsive

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

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

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>
    document.getElementById("btnabrir").addEventListener("click",function(){
       document.getElementsByClassName("fondo_transparente")[0].style.display="block" 
       return false
    })
    document.getElementsByClassName("modal_cerrar")[0].addEventListener("click",function(){
        document.getElementsByClassName("fondo_transparente")[0].style.display="none" 
    })
</script>

 

Y, bueno es todo con respecto a este tips.

 

¿Quieres descargar el código fuente Diseñar ventana modal responsive?
...por favor suscríbete gratuitamente para descargarlo

CSS HTML Javascript

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 4475 veces | Publicado hace 9 meses

Curso Laravel 8 Página Web 100% Administrable

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021