CÓDIGO FUENTE CSS
Más tutoriales de programación
1. Centrar un div con CSS 2. Poner imagen en un div responsive 3. Diseñar ventana modal responsive 4. Posicionar elementos o divs con CSS 5. Diseñar el background en 50% de un H1 6. Diseñar iconos burger y doots 7. Agregar efecto degradado a texto 8. Aprende a usar Animate.css rápido y fácil 9. Diseñar un menu responsive 10. Vincular un hoja de estilos CSS 11. Aplicar CSS en una página web 12. ¿Qué es una hojas de estilos CSS? 13. CSS en el Head 14. Ajustar texto a una imagen shape-outside 15. Estilo hoja de notas con CSS puro 16. Aplicar efectos animados con transition 17. Hola Mundo con CSS 18. Card 3d flip básico con perspetive 19. Diseño de Card con CSS 20. Timeline en CSS sencillo 21. Texto Circular con CSS y JS 22. Animar elementos con CSSDiseñ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
Visitado 4475 veces | Publicado hace 9 meses
Más tutoriales de programación relacionadas a CSS
