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

Поділитися
Вставка
  • Опубліковано 11 лис 2024

КОМЕНТАРІ • 316

  • @jossgudy5618
    @jossgudy5618 4 роки тому +33

    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;
    }
    }

  • @estebanfranciscoacostaapon3287
    @estebanfranciscoacostaapon3287 3 роки тому

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

  • @lordsheep9999
    @lordsheep9999 3 роки тому

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

  • @teranube
    @teranube 4 роки тому

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

  • @pedroalonso6692
    @pedroalonso6692 6 років тому +1

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

  • @ricardonieto6
    @ricardonieto6 8 років тому +13

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

  • @jorgealejandromarquezmedin5014
    @jorgealejandromarquezmedin5014 2 роки тому

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

  • @mikelhuerta5173
    @mikelhuerta5173 3 роки тому

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

  • @franciscocuevas6377
    @franciscocuevas6377 2 роки тому +1

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

  • @germanbaena6579
    @germanbaena6579 2 роки тому

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

  • @tazjtulz
    @tazjtulz 4 роки тому

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

  • @techiot1834
    @techiot1834 2 роки тому +1

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

  • @elkineduardorojaspena3993
    @elkineduardorojaspena3993 6 років тому

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

  • @lockstrailgd5521
    @lockstrailgd5521 4 роки тому

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

  • @renzo2270
    @renzo2270 8 років тому

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

  • @robyirloreto
    @robyirloreto 3 роки тому

    Excelente explicación, Agradecido..Saludos desde Venezuela

  • @HijadeOdin
    @HijadeOdin 5 років тому

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

  • @cristianjulianhernandezsol74
    @cristianjulianhernandezsol74 4 роки тому

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

  • @mariapaterninatovar2939
    @mariapaterninatovar2939 3 роки тому

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

  • @galobarros7917
    @galobarros7917 4 роки тому

    bueniiisimo estimado! no lo encontraba por ningun lado

  • @SuperBengii
    @SuperBengii 4 роки тому +1

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

  • @joseantonioblanco9799
    @joseantonioblanco9799 3 роки тому

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

  • @melkooliveros5554
    @melkooliveros5554 4 роки тому

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

  • @Lowensteiner
    @Lowensteiner 4 роки тому

    Super sencillo. Gracias hermano, saludos desde Argentina

  • @PedroRamirez-fk1zm
    @PedroRamirez-fk1zm 6 років тому

    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.

  • @hcx3
    @hcx3 6 років тому

    Amigo muchas gracias, Cordial saludo desde Bogotá Colombia.

  • @santiagolechon9591
    @santiagolechon9591 4 роки тому +1

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

  • @mowgly3d
    @mowgly3d 3 роки тому +2

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

  • @gespinosacl
    @gespinosacl 6 років тому

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

  • @YakuzaBiohazard
    @YakuzaBiohazard 7 років тому +1

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

  • @santosahernandezmendoza7147
    @santosahernandezmendoza7147 4 роки тому +1

    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.

  • @Marckop
    @Marckop 7 років тому +1

    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
    @leonardomartinez5196 6 років тому

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

  • @diosteama6585
    @diosteama6585 6 років тому

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

  • @magma777_dev
    @magma777_dev 15 днів тому

    ¡Tremendo video, muchas gracias!!

  • @NeoGeo-cu2xi
    @NeoGeo-cu2xi Рік тому

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

  • @onevisiondigitalart5868
    @onevisiondigitalart5868 7 років тому

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

  • @benito8120
    @benito8120 7 років тому

    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

  • @miguelsantillan5791
    @miguelsantillan5791 4 роки тому

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

  • @jesusgonzalez1074
    @jesusgonzalez1074 2 роки тому

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

  • @AnaLuciAller
    @AnaLuciAller 2 роки тому

    Muchas gracias! Súper bien explicado.

  • @jarrodvillalobos
    @jarrodvillalobos 8 років тому +4

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

  • @MarcosEsqueda
    @MarcosEsqueda 8 років тому +1

    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

  • @yinuchija2868
    @yinuchija2868 5 років тому +1

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

  • @marcorodriguez5094
    @marcorodriguez5094 7 років тому

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

  • @Junio7solido2
    @Junio7solido2 Рік тому

    Gracias. Dios te bendiga siempre

  • @chicaker202
    @chicaker202 6 років тому

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

  • @jhonbarcasnegras
    @jhonbarcasnegras 9 років тому

    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
      @Jygproyectosweb  9 років тому +2

      +Jhon Barcasnegras Hola, muchas gracias, ¿algo así como la galería que hicimos? ua-cam.com/video/mWKmDV94uPI/v-deo.html

    • @jhonbarcasnegras
      @jhonbarcasnegras 9 років тому

      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
      @Jygproyectosweb  9 років тому

      pues el efecto es similar al de la galería

  • @osvaldodelpino1319
    @osvaldodelpino1319 9 років тому

    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

  • @armandovargas7221
    @armandovargas7221 7 років тому

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

  • @GiovannyHernandezZ
    @GiovannyHernandezZ 8 років тому

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

  • @alejandramendez7821
    @alejandramendez7821 4 роки тому

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

  • @javierlazarolopez3584
    @javierlazarolopez3584 3 роки тому

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

  • @luiscejudo658
    @luiscejudo658 6 років тому

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

  • @gaby_developer3126
    @gaby_developer3126 4 роки тому

    Muy bueno amigo, son excelentes tus videos!!!

  • @srjuanchoman
    @srjuanchoman 3 роки тому

    Es usted un maestro

  • @8005josue
    @8005josue 4 роки тому

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

  • @lowermarcowin
    @lowermarcowin 4 роки тому

    gracias es lo que estaba buscando

  • @murderride
    @murderride 3 роки тому

    Excelente tutorial!!! 10/10

  • @Magna7575
    @Magna7575 8 років тому +1

    Sos un maestro saludos desde Ecuador sigue adelante

  • @oscarsaporito6208
    @oscarsaporito6208 Рік тому

    Excelente aporte!

  • @CamiloCastro
    @CamiloCastro 4 роки тому +3

    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?

  • @AngelDiaz-ns7fm
    @AngelDiaz-ns7fm 7 років тому

    Muchas Gracias excelente video... muy claro y practico

  • @camiloplanb
    @camiloplanb 7 років тому

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

  • @carlossmyrlock2978
    @carlossmyrlock2978 6 років тому

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

  • @eriksalinas7788
    @eriksalinas7788 2 роки тому

    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 😎

  • @jessirodriguez2835
    @jessirodriguez2835 6 років тому

    eres un duro en esto

  • @escueladeodontologiauniver923
    @escueladeodontologiauniver923 4 роки тому

    Parce usted es muy pro

  • @jhordanloaisigaflores6237
    @jhordanloaisigaflores6237 6 років тому

    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 .

  • @damarysacostaguette2137
    @damarysacostaguette2137 5 років тому

    Gracias amigo, muy clara la explicacion. Excelente tutorial.

  • @franciscorivera8352
    @franciscorivera8352 6 років тому

    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
    @yayoflv3447 6 років тому

    Eres un dios Crack

  • @bitacid
    @bitacid 4 роки тому

    Muy buen video, cuidaros mucho.

  • @eduardofernandez4442
    @eduardofernandez4442 8 років тому

    Excelente tutorial amigo, realmente muy pero muy bueno

  •  7 років тому

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

  • @deibixweb
    @deibixweb 4 роки тому +1

    Demasiado bueno

  • @davidreva1729
    @davidreva1729 7 років тому

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

  • @diegus21
    @diegus21 6 років тому

    Muy buenas tus explicaciones, gracias

  • @josedlf9939
    @josedlf9939 5 років тому

    Ameno, bien explicado y agradable. Gracias.

  • @josuereyes6948
    @josuereyes6948 3 роки тому

    muchas gracias maestro

  • @catilin27
    @catilin27 8 років тому

    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.

  • @Manu-eo7bn
    @Manu-eo7bn 9 років тому +1

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

  • @AXELKAIZER
    @AXELKAIZER 8 років тому +1

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

  • @cvillanuevasa
    @cvillanuevasa 8 років тому

    MUY BUENO EL VIDEO, AMIGO PODRIAS HACER UNA VENTANA MODAL PERO CON LOGIN Y SI QUE NO SE CIERRE HASTA LOGEARSE Y QUE DESPUES DE LOGEARSE DE DIRIJA A SU PERFIL O SESION

  • @MrBusbuny
    @MrBusbuny 6 років тому

    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.

  • @Jmrivas12
    @Jmrivas12 8 років тому +1

    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
      @felipealessandrochiriboga2181 8 років тому

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

  • @YamidElTitan
    @YamidElTitan 8 років тому +1

    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.

  • @NoemiSalva
    @NoemiSalva 4 роки тому

    Impecable! Muchas gracias...

  • @adrianperg
    @adrianperg 9 років тому

    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

  • @julianju2005
    @julianju2005 7 років тому

    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.

  • @inpahu1
    @inpahu1 5 років тому

    excelente muchas gracias

  • @geraldinr1537
    @geraldinr1537 5 років тому +1

    Genio!

  • @jaimevetrun
    @jaimevetrun 6 років тому

    Excelente... Nada más. Excelente!

  • @armandopl4228
    @armandopl4228 6 років тому +1

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

  • @omorfiacuidadonatural
    @omorfiacuidadonatural 5 місяців тому

    Graciasss!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @davidriveradelacruz946
    @davidriveradelacruz946 7 років тому

    gracias me ayudo le agregue javascript para desaparecer la ventana modal con evento onclick

  • @fabianmina89
    @fabianmina89 6 років тому

    Excelente, excelente video. Muchas gracias.

  • @SkyWokeR1000
    @SkyWokeR1000 4 роки тому

    muchas gracias parcero

  • @gustavoalejandrogarcia5951
    @gustavoalejandrogarcia5951 4 роки тому

    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

  • @joseluisballesterosortiz3193
    @joseluisballesterosortiz3193 7 років тому

    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