Ventana modal al cargar página web con HTML y CSS (sin plugins)

[@estebanfranciscoacostaapon3287]

SIN DUDA ALGUNA ERES A MI PARECER EL Q MEJOR EXPLICA MUCHAS GRACIAS.

[@ricardonieto6]

Demasiado bueno He buscado siempre x google... y los tutoriales tuyos son lo mejor

[@teranube]

Genial y sencillo. Después de mucho navegar y probar, este fue el video definitivo

[@lordsheep9999]

Coincido con Ricardo Nieto, muy bien explicado, con sus notas, y detalles, mis 10

[@pedroalonso6692]

¡Excelente! Que bien simplificas lo dificil hasta hacerlo comprensible para los que somos novatos en este terreno. ¡Gracias por compartir tu sabiduría!

[@techiot1834]

Estupendo!!! Me haz salvado, que simple y completo. Felicidades, y excelente explicación. Un suscriptor mas, gracias por compartir de tu saber. Éxitos.

[@mikelhuerta5173]

Eres un genio ! saludos desde México !! gracias por compartir tus conocimientos.

[@franciscocuevas6377]

Muy buen vídeo, super práctico y fácil de entender. Gracias por compartir tu conocimiento.

[@jossgudy5618]

Código pora el que guste: body{ text-aling:center; font-family: sans-serif; } .modal{ width: 100%; height: 100vh; background: rgb(0,0,0,0.8); position: absolute; top: 0; left: 0; display: flex; animation: modal 2s 3s forwards; visibility: hidden; opacity: 0; } .contenido{ margin: auto; width: 40%; height: 40%; background: white; border-radius: 10px; } #cerrar{ display: none; } #cerrar + label{ position: absolute; color: #fff; font-size: 25px; z-index: 50; background: darkred; height: 40px; width: 40px; line-height: 40px; border-radius: 50%; right: 10px; cursor:pointer; animation: modal 2s 3s forwards; visibility: hidden; opacity: 0; } #cerrar:checked + label, #cerrar:checked - .modal{ display: none; } @keyframes modal{ 100%{ visibility: visible; opacity: 1; } }

[@tazjtulz]

Qué gran explicación... Soy nueva en todo este mundo de programación y me encantó la explicación... Muchas gracias.

[@robyirloreto]

Excelente explicación, Agradecido..Saludos desde Venezuela

[@lockstrailgd5521]

Amo su tecnica de las checkbox. Me encantan tus videos me enseñan mucho

[@HijadeOdin]

Muchas felicidades a las personas que aportan conocimiento a las redes. Muchas gracias. Saludos!!!

[@santiagolechon9591]

Un tutorial muy claro y no tan extenso, me gusto mucho gracias

[@elkineduardorojaspena3993]

Es un buen programador y aparte en su explicación hece ver las cosas tan faciles felicitaciones

[@YakuzaBiohazard]

Excelente video. Muy sencillo y bien explicado. Saludos desde chile!

[@jorgealejandromarquezmedin5014]

ya me salio pero tuve que cambiar algunas cosas como: la X no me quedaba centrada dentro del circulo asi que use el id #btn-cerrar para darle un text align: center, y otro par de detalles , pero de verdad ESPECTACULAR lo subo compañero!!!!

[@SuperBengii]

Me has salvado, estoy agradecido. *Insertar voz de alien de toy story* 🚀🤘🏻

[@Lowensteiner]

Super sencillo. Gracias hermano, saludos desde Argentina

[@germanbaena6579]

Siete años después y es maravilloso este tutorial, gracias!

[@mowgly3d]

Buen tutorial, simple y funcional, me sirvio mucho, gracias por compartir

[@onevisiondigitalart5868]

siempre ayudan mucho tus videos carnalito saludos desde Norte America!!!!! n,n

[@mariapaterninatovar2939]

estaba buscando precisamente esta explicación, muchísimas graciasssss

[@hcx3]

Amigo muchas gracias, Cordial saludo desde Bogotá Colombia.

[@santosahernandezmendoza7147]

Excelente tutorial! Es increíble todo lo que se puede hacer con html y css. Y si sabemos manejar js pues mucho mejor, así se amplían más el campo de posibilidades.

[@benito8120]

Sos grande paps, te la rifas al 100, esta forma fue mas rápida y mejor para implementar en mi proyecto. Mil gracias y soy un nuevo subscriptor seguro :D

[@renzo2270]

Excelente aporte... Demostraste que conoces lo que hablas... Esta bien...

[@galobarros7917]

bueniiisimo estimado! no lo encontraba por ningun lado

[@gespinosacl]

Que bien explicado, a prueba de principiante, felicitaciones !!!

[@cristianjulianhernandezsol74]

Muchas gracias. Justo lo que buscaba. Like y me suscribo. Bendición.

[@miguelsantillan5791]

Gracias por el tutorial, eres un genio. Saludos desde Lima.

[@yinuchija2868]

Excelente video, muy buena explicación y me salio tal cual capo de capos. Muchas gracias tienes un suscriptor.

[@joseantonioblanco9799]

Explicaciones amenas y precisas sin hablar tanto. Me encantan. Ahora me gustaria saber como se hace todo eso de google y lo pongo como ejemplo, otras paginas lo tienen, como se hace para que la pagina no sea infinita y dando clic en los numeros pasemos a la siguiente informacion como si fuera otra pagina????

[@jarrodvillalobos]

Gracias amigo Explicas muy bien excelente Vídeo Ojala pronto hagas vídeos Sobre Jquery

[@PedroRamirez-fk1zm]

Hola juan Carlos. Buenas tardes. Todos tus vídeos son bastante entendibles, gracias y no se si de favor pudieras sacar un vídeo de como podemos añadir una pagina web al escritorio de nuestro celular como acceso directo, es decir sin necesidad de oprimir los 3 puntos del navegador del celular y elegir la opción "añadir a pantalla de inicio" no se si esto se pueda hacer desde nuestra pagina web empleando los codigos html y css. saludos, gracias y espero me puedas apoyar.

[@Marckop]

amigo, eres un crack. explicas de maravilla. yo se programar, y quiero enseñar a mi hija, (la de la foto) que ya tiene 11 años, pero no se como explicar, pues yo todo lo aprendí, viendo vídeos y leyendo en la web del maestro, y en sitios en ingles. Mi hija no sabe nada de programación, que me recomiendas para que vaya iniciando? tienes algún vídeo que explique a algún principiante las bases? gracias y saludos de de Mty, NL, MX

[@leonardomartinez5196]

Excelente video... muy claro y fácil.. y sobre todo muy bien explicado...

[@NeoGeo-cu2xi]

Sos un capo amigo. me re salvaste con este tuto.

[@marcorodriguez5094]

cada dia aprendo mas ! es una gran ayuda tu canal saludos !

[@MarcosEsqueda]

Me gustaría muchísimo ver un tutorial sobre como hacer ventanas de alert, prompt, etc de JS customizadas. Muchas gracias por este tuto. Espero me apoyen en esta petición y el tiempo te de para hacerlo jaja

[@javierlazarolopez3584]

Muchas gracias!! me ha servido mucho. Es el primer tutorial tuyo que veo y esta buenísimo; ¿será que nos puedas mostrar como hacer al modal responsive? Gracias!!

[@jhonbarcasnegras]

Excelente video, como siempre. Me encantan estos videos tan espectaculares sólo con CSS y HTML. Precisamente estaba pensando cómo se haría para que cuando doy click en una imagen esta se muestre así por encima de la web ampliada hasta que se cierre. Viene a ser lo mismo con un par de cambios, supongo. Muchas gracias y sigue así.

[@Jygproyectosweb]

+Jhon Barcasnegras Hola, muchas gracias, ¿algo así como la galería que hicimos? kzbin.info/www/bejne/o4iunneMbpmohqs

[@jhonbarcasnegras]

Hola, genial video. Algo para ampliar una imagen de la página (Una que acompaña un artículo, por ejemplo) y que pase a "tapar" la web propiamente como tu ventana modal. No debe ser difícil adaptar lo que tú enseñas para hacer eso. Creo que es el efecto lightbox. Pd: Ya me voy a mirar tu galería.

[@Jygproyectosweb]

pues el efecto es similar al de la galería

[@diosteama6585]

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

[@jesusgonzalez1074]

Mucgas gracias amigo :3.. Me sirvio de mucho para mis trabajos

[@melkooliveros5554]

La verdad me gusta mucho pero a veces me gustaria encontrar el codigo ya hecho y solo modificarlo...! gracias eres muy bueno tienes mi like...!

[@Magna7575]

Sos un maestro saludos desde Ecuador sigue adelante

[@AnaLuciAller]

Muchas gracias! Súper bien explicado.

[@magma777_dev]

¡Tremendo video, muchas gracias!!

[@gaby_developer3126]

Muy bueno amigo, son excelentes tus videos!!!

[@GiovannyHernandezZ]

Gracias por tus Vídeos me has ayudado mucho espero que sigas así muchas gracias por tu aporte Dios te bendiga mucho

[@carlossmyrlock2978]

¡hola! Me han gustado muchos tus vídeos, muchas gracias, :)

[@murderride]

Excelente tutorial!!! 10/10

[@camiloplanb]

huy amigo muchas gracias un gran saludo desde colombia (Y) zipaquira

[@alejandramendez7821]

GRACIAS!!!! Te debo la vida. Saludos!

[@damarysacostaguette2137]

Gracias amigo, muy clara la explicacion. Excelente tutorial.

[@osvaldodelpino1319]

Gracias J&G Proyectos Web muy buen tutorial me ha sido de gran utilidad, solo tengo un problemita con Explorer funciona pero con Chrome no supongo tenga que agregarle algún prefijo pero si es así tampoco se donde ponerlo. muchas gracias

[@chicaker202]

Hola que tal. Tus vídeos son muy buenos. Por favor si puedes cargas mas vídeos

[@Junio7solido2]

Gracias. Dios te bendiga siempre

[@Manu-eo7bn]

Muy buen video y muy bien explicado, enhorabuena! Eres un gran comunicador !

[@lowermarcowin]

gracias es lo que estaba buscando

[@eduardofernandez4442]

Excelente tutorial amigo, realmente muy pero muy bueno

[@AngelDiaz-ns7fm]

Muchas Gracias excelente video... muy claro y practico

[@davidreva1729]

Muy buen video. Me salio a la perfección con un video en formato mp4. Gracias

[@srjuanchoman]

Es usted un maestro

[@AXELKAIZER]

Genial! muy bueno...excelente tutorial y muy bien explicado.

Excelente explicación, felicitaciones todo funciono tal cual como en el video. GRACIAS...

[@luiscejudo658]

antes que nada eres buenisimo y tus videos son claros y explicativos.... quisiera q me ayudaras amigo, como poner de inicio un modal de video que se cierre automaticamente cuando acabe el video e inicie la pagina web, porfavor ayudame a realizarlo....

[@armandopl4228]

Está buenaza esta explicación bro, bien ahí

[@8005josue]

hola amigo excelente aporte, HE QUERIDO ADICIONAR A TU MODAL algo que haga que SOLO APAREZCA UNA SOLA VEZ AL ENTRAR A LA PAGINA y no que cada vez que vas al inicio vuelve a salir otra vez, lo que lo hace fastidioso para algunas personas agradesco cualquier aporte que complemente este genial modal muchas gracias!!

[@bitacid]

Muy buen video, cuidaros mucho.

[@oscarsaporito6208]

Excelente aporte!

[@josedlf9939]

Ameno, bien explicado y agradable. Gracias.

[@eriksalinas7788]

Buenas tardes me gusto tu video fácil de hacer, te consulto podrías hacer un video haciendo lo mismo pero con javascrip, gracias. Pd: nuevo subcritor 😎

[@escueladeodontologiauniver923]

Parce usted es muy pro

[@jessirodriguez2835]

eres un duro en esto

[@diegus21]

Muy buenas tus explicaciones, gracias

[@CamiloCastro]

Excelente Tutorial Me funcionó perfecto, pero tengo una duda. Al poner un video en la ventana modal (Alojado con la etiqueta , cómo puedo hacer para que dicho video también se detenga, en audio e imagen, al momento de cerrar la ventana modal?

[@fabianmina89]

Excelente, excelente video. Muchas gracias.

[@fausto1000]

hola Carlos, primero que nada tengo que agradecerte porque me ayudaron muchisimo tus videos y fuera de la ayuda tecnica hay un valor agregado que viene de tu forma de explicar y los temas tan lindos (y bien diseniados) que eliges para tus tutoriales. bue despues que quede como un chupamedias, aunque es sinceso mi agradecimiento, querria preguntarte una cosa. como hago para que el modal solo aparezca una vez? es decir en la web que estoy armando la hice a la vieja usansa de muchas paginas separadas y con cero scroll, este tutorial me re ayudo pero cada vez que vuelvo a home aparece el modal y se convierte en molesto. como hago que solo aparezca una vez?

[@Josegregorioag]

Buen aporte! funciona perfecto! saludos!

[@franciscorivera8352]

Muy bien video, muy clara la explicación. Me gustaría que de igual forma me muestre un modal por única ocasión al iniciar sesión por primera ves, este modal va a contener un form para cambiar la contraseña. Me gustaría pudieran ayudarme.

[@yayoflv3447]

Eres un dios Crack

[@catilin27]

hola. gracias por tu valioso aporte a los que necesitamos . en este video no puedo alinear a la derecha el checbox por por favor gracias.

[@armandovargas7221]

Me parece excelente el tutorial loq requiero es como pasar datos a la ventana modal y viceversa sin usan javascritpt

[@GarciaValeria91]

¡Muchas gracias, me sirvió un montón! :D

[@NoemiSalva]

Impecable! Muchas gracias...

[@jhordanloaisigaflores6237]

Gracias me sirvió de muchísima ayuda solo que combine este con el preloader y no podía presionar x el problema se daba porque en el preloader hay un div con absolute lo que hice fue cambiar la propiedad del label z-index a 10000 lo escribo por si a alguien mas le pasa .

[@MrBusbuny]

Muy buen vídeo, pero me gustaría ver que hagas un modal con un formulario que sea llamado desde un botón en la barra de navegación.

[@adrianperg]

Hola me parecen excelentes tus tutoriales, de los mejores explicados, quisiera saber si me ayudas con esta duda, si lo que quiero mostrar en el modal es un video de pocos segundos al entrar al sitio y que al terminar el video se muestre mi sitio automáticamente como haría?, te agradezco de antemano

[@jonellmalpartidalozano7682]

Excelente,muy buen vídeo.

[@deibixweb]

Demasiado bueno

[@geraldinr1537]

Genio!

[@joseluisballesterosortiz3193]

Buen día Amigo, primero lo felicito por el canal, muy bueno y segundo quiero que al cargar una pagina, me aparezca unas ventanas de guía donde le vayan indicando a los usuarios el manejo de la pagina . Esos es también con ventanas modales? y como hago para que no aparezca en el centro si no en la parte donde yo le indico. Gracias

[@oliveroliver362]

felicidades bro buen aporte

[@Jmrivas12]

hola amigo buen tutorial, disculpa que propiedad del css debo mover si quiere que solo me aparezca una vez al entrar a mi pagina y al volver a recargar la pagina ya no... te agradecería si sabes me respondas de antemano muchas gracias excelente tutorial...

[@felipealessandrochiriboga2181]

Para eso necesitas js, como por ejemplo cuando haces salir la ventanita de la política de cookies

[@gustavoalejandrogarcia5951]

Hola buen día, excelente todos tus videos, muchas gracias, una consulta, si tengo una pagina ya en PHP, hay alguna manera de poder agregar este código para una ventana model o emergente

[@jaimevetrun]

Excelente... Nada más. Excelente!

[@YamidElTitan]

Amigo me gustaria incluir esta ventana modal en una etiqueda Registrar persona por ejemplo la cual está incluida dentro de una nav bar que al hacer click sobre ese vinculo abra la ventana modal con el formulario de registro que tan complejo ves esto amigo. De ante mano agradezo tu atencion y colaboracion prestada.

[@julianju2005]

Muy Buen Tutorial, gracias por compartir ... Solo un detalle al momento de recargar la pagina ya no se vuelve a mostrar, tengo que borrar temporales y ahí recién vuelve a aparecer.

[@josuereyes6948]

muchas gracias maestro