28 marzo, 2020

Diseñar ventana modal responsive

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.

Suscríbete a nuestro canal en Youtube

Suscríbirse

¿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

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


Leido 35747 veces | 12 usuarios

Demo

Descarga del código fuente HTML + CSS de Diseñar ventana modal responsive

321 descargas

Para descargar el código crea una cuenta

Crear cuenta

Compartir link del tutorial con tus amigos


Curso de HTML

USD 0.00

Descarga del código fuente

Curso de HTML
Diseño Web con HTML & CSS

USD 10.00

Descarga del código fuente

Diseño Web con HTML & CSS

Más tutoriales de HTML + CSS

Codea Applications

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

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025