Como hacer una ventana MODAL😱 | HTML5 - CSS3 | Muy Fácil😍
Вставка
- Опубліковано 19 вер 2024
- #PRELOADER, #HTML , #CSS Aprende a crear una hermosa ventana modal para tu sitio web, esto esta creado con HTML5 - CSS3, de una manera muy fácil y bien explicada, espero que te guste.
No olvides compartir, para que otros se beneficien del vídeo de la misma manera en la que tu te has beneficiado, saludos.
____________
●Suscribete a mi Canal:
goo.gl/Y5liMk
●Mi sitio web:
magtimus.pro
●Recursos del tutorial aquí:
goo.gl/gH1Thw
____________
=== Comprar en TemplateMonster ===
●Link para adquirir plantilla
goo.gl/G3GoHn
____________
==▼=GRUPOS DE APOYO=▼==
●Grupo de Facebook
goo.gl/eMFqVb
●Grupo de WhatsApp
goo.gl/9jtwT6
____________
●Donaciones con PayPal
www.paypal.me/...
____________
▼REDES SOCIALES▼
♦Facebook:
/ themagtimus
♦Instagram:
/ magtimus
♦Twitter:
/ magtimus
Eres el mejor... pero con muuucha diferencia. Muchas gracias por tus vídeos
Muchas gracias, hacía un montón que no tocaba html y no recordaba como se hacía las ventanas modales.
Me ha encantado el video
modal
Ventana modal
Abrir Ventana
X
Buen trabajo!
CSS
body{
background: #3e2525;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
h1{
color: white;
padding: 1em;
}
#show-modal{
text-align: center;
background: #bc651a;
padding: 15px 15px;
color: white;
font-weight: 500;
font-size: 1.5em;
border-radius: 3.5px;
text-decoration: none;
transition: all 0.15s linear;
}
#show-modal:hover{
cursor: pointer;
color:#cb9d1a;
}
.modal{
position: fixed;
top:-100vh;
left: 0;
z-index: 99999999;
background: rgb(0,0,0,0.75);
width: 100vw;
height: 100vh;
opacity: 0;
transition: opacity 0.35s ease;
}
.modal .content-modal{
width: 100%;
max-width: 500px;
position: fixed;
left: 50%;
top: -100vh;
transition: top 0.35s ease;
margin-left: -250px;
background: white;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
border-radius: 2px;
z-index: 9999999;
}
.modal h2{
padding: 0.5em;
text-align: center;
color:444444;
margin: 0;
}
.modal article{
height: 300px;
background: #bc651a;
}
.close-modal{
color:#e74c3c;
position: absolute;
top: 0.2em;
right: 0.375em;
margin: 0;
padding: 5px;
font-weight: bold;
font-size: 1.5em;
text-decoration: none;
}
.modal a:hover{
color:#c0392a;
}
.modal:target{
opacity: 1;
top: 0;
}
.modal .btn-close-modal{
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 99999991;
}
.modal:target .content-modal{
top: 50px;
transition: top 0.35s ease;
}
@media screen (max-width: 795px;){
.modal .content-modal{
width: 90%;
max-width: none;
left: 5%;
margin.left: 0;
}
}body{
background: #3e2525;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
h1{
color: white;
padding: 1em;
}
#show-modal{
text-align: center;
background: #bc651a;
padding: 15px 15px;
color: white;
font-weight: 500;
font-size: 1.5em;
border-radius: 3.5px;
text-decoration: none;
transition: all 0.15s linear;
}
#show-modal:hover{
cursor: pointer;
color:#cb9d1a;
}
.modal{
position: fixed;
top:-100vh;
left: 0;
z-index: 99999999;
background: rgb(0,0,0,0.75);
width: 100vw;
height: 100vh;
opacity: 0;
transition: opacity 0.35s ease;
}
.modal .content-modal{
width: 100%;
max-width: 500px;
position: fixed;
left: 50%;
top: -100vh;
transition: top 0.35s ease;
margin-left: -250px;
background: white;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
border-radius: 2px;
z-index: 9999999;
}
.modal h2{
padding: 0.5em;
text-align: center;
color:444444;
margin: 0;
}
.modal article{
height: 300px;
background: #bc651a;
}
.close-modal{
color:#e74c3c;
position: absolute;
top: 0.2em;
right: 0.375em;
margin: 0;
padding: 5px;
font-weight: bold;
font-size: 1.5em;
text-decoration: none;
}
.modal a:hover{
color:#c0392a;
}
.modal:target{
opacity: 1;
top: 0;
}
.modal .btn-close-modal{
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 99999991;
}
.modal:target .content-modal{
top: 50px;
transition: top 0.35s ease;
}
@media screen (max-width: 795px;){
.modal .content-modal{
width: 90%;
max-width: none;
left: 5%;
margin.left: 0;
}
}
Excelente amigo, eso es lo que estaba pensando hace días, para un proyecto, gracias me salvaste.
Lastima que Magtimus ya se canso de platicarnos que es lo que va haciendo durante el proceso :) Excelentes tus videos, Magtimus, me agrada mucho la creatividad que tienes en tus diseño, sigue adelante con muchas ganas
Gracias! Vi varios vídeos pero este fue el que me funcionó
Muy buen vídeo 😆
Muy buen vídeo me funcionó, gracias❤👍
Excelente video, css puro sin nada de js. Aprendi con tu codigo, saludos!
Que buen video, me sirvio demasiado.
Como siempre magtimus dando los mejores diseños, ya hasta active la campanita
:) Cuando uno hacia sus primeros pinitos como UA-camr para emocionar a los beginners
Como esta amigo esta muy bueno el video, pero tambien me gusto el efecto de escritura con bracket , yo uso sublime, sabes si existira uno parecido en sublime ? o almenos saber cual es ese efecto
Parabéns muito lindo, você sabe fazer. Brilhante!!!
Te felicito amigo... Sería interesante agregarle una condición para que se le abra la ventana modal al usuario que solo visita la página la primera vez, tal vez por cookies, configurar la cookies por algunos días para ese usuario...
Hola amigo recien veo este video por cierto como haces ese efecto de que la pantalla vibre cuando escribres codigo?
eres una bestia men !! al fin pude hacer lo que quería gracias a tu tutorial. Continua haciendo videos de este tipo. ¿Sabes que esta interesante? vista la pagina de Duolingo y mira como se despliega el formulario de ingreso, seria interesante saber cómo se hace
Excelente tutorial, que tema utilizas en brackets?
Monokai darker soda, no tiene lo del movimiento pero tiene el color
Genial, por cierto, como hiciste ese efecto de escritura ?
El Pilotiiiiinnnnn
Huy que fácil 😂 saludos manito
Los archivos tiene que estar en la misma carpeta
Tanta mierda para una miserable ventana modal, por eso no me gusta programar en web, en cliente servidor eso lo hacía con una sola línea de código
Ya la estoy transformando en un. Componente de vue
Qué programa está usando?
¿Cual es el editor de video que utilzas?
amigo ojales tomes en cuenta este pedido no sé si puedes hacer un vídeo de cómo útilizar el phpmailer
Salúdame Magtimus.
Agregue varios mas, pero cuando doy click a otro siempre sale el contenido del primero, que hago?
Los archivos ya no estan disponibles y la pagina web tampoco! :(
amigo, si vas a hacer un vídeo explica lo que haces, para que sirve cada código que realizas, la idea es aprender no solo copiar. saludos
y si alguien quiere agregarle un contenido a ese panel se hace con html ?
y como hago para que aparesca automaticamente la ventana emergente al abrir la web
con javaScript
Una pregunta y para hacer que el modal aparezca automaticamente cuando cargue mi pagina web?
Se carga con un script en el body
Link caido para obtener los recursos
Donde descargo la planilla
lo que pasa es que he visto algunos videos y no se explican bien
el link del recurso esta caído podrías actualizarlo porfavorrr
Nombre del sonido de fondo en el minuto 4:10? Porfavor :'c
Keep on Going - Joakim Karaud :v
Mi like prro
has un modal que se abra ni bien abres tu pagina web.. !! no con boton