Creando Ventana Modal (Popup) con HTML/CSS y JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ต.ค. 2024

ความคิดเห็น • 56

  • @alejandrocordova4543
    @alejandrocordova4543 3 ปีที่แล้ว +2

    ¡Muchas gracias por el tutoría!
    Aquí hay otra forma de abrir y cerrar modales con JavaScript, de esta manera podemos tener varios modales -con distinto contenido- en la misma página.
    =================== HTML ===================
    Botón para abrir el modal:
    Ver más
    Modal
    ...
    ...
    Cerrar
    =================== JAVASCRIPT ===================
    const openModal = (param) => {
    const modal_container = document.getElementById("modal-" + param);
    modal_container.classList.add('show');
    }
    const closeModal = (param) => {
    const modal_container = document.getElementById("modal-" + param);
    modal_container.classList.remove('show');
    }
    *Para los que recién están empezando y no están familiarizados con las funciones flecha:*
    function openModal() {
    const modal_container = document.getElementById("modal-" + param);
    modal_container.classList.add('show');
    }
    function closeModal() {
    const modal_container = document.getElementById("modal-" + param);
    modal_container.classList.remove('show');
    }

  • @jorgemiguelcardenasgarcia3305
    @jorgemiguelcardenasgarcia3305 3 ปีที่แล้ว +1

    Otro más que vió varios videos pero el tuyo es el más sencillo y facil de entender sin tanta cosa extra.

  • @mikonoishida9971
    @mikonoishida9971 2 ปีที่แล้ว +1

    Un ángel informático me ha salvado, gracias, de verdad muchas gracias!

  • @erickgonda6264
    @erickgonda6264 3 ปีที่แล้ว +6

    Un millon de gracias!!!! He visto varios videos pero el tuyo fue el unico que explica de manera sencilla y muy practica sobre como añadir Modal. Esta muy bueno para personas que recien estan aprendiendo este nuevo lenguaje de JavaScript como lo es mi caso.
    Ya ganaste un seguidor más, espero puedas seguir subiendo mas contenido fáciles de entender.
    Exitos y cdt!!!

  • @jufran_87
    @jufran_87 4 ปีที่แล้ว +4

    Muchas gracias por el material, sin yo saber mucho de HTML, ni CSS, entendí claramente lo que sucedía, muy bien explicado y muy práctico sobre todo

  • @DanoraWW
    @DanoraWW 2 ปีที่แล้ว +1

    Buenardo el video, muchas gracias.

  • @joselo1961
    @joselo1961 ปีที่แล้ว +1

    Excelente!!! Me ha resultado muy útil!!! Muy didáctica tu explicación!!! 👏👏👏

  • @alexvillarreal3947
    @alexvillarreal3947 8 หลายเดือนก่อน +1

    excelente video todo lo que ocupaba bro... me suscribo

    • @grovertec
      @grovertec  8 หลายเดือนก่อน

      Gracias

  • @danielcrespin9661
    @danielcrespin9661 ปีที่แล้ว

    Muy bien explicado estimado.

  • @matiasposadas7109
    @matiasposadas7109 2 ปีที่แล้ว +1

    geniooooo! me savaste jje

  • @pablomesa9393
    @pablomesa9393 ปีที่แล้ว +1

    excelente!!! gracias!!!

  • @yeseniagonzalez3540
    @yeseniagonzalez3540 2 ปีที่แล้ว

    Muy bien explicado, gracias, e visto varios videos y este es el que mas entendí

  • @beluzitasgarbage
    @beluzitasgarbage 3 ปีที่แล้ว +1

    Excelente! Simple y paso a paso. Muchas gracias!

  • @josemiguelfalcon6146
    @josemiguelfalcon6146 2 ปีที่แล้ว +2

    me gustan bastante tus videos !! tienes una forma de programar muy parecida a la mia EXITOS MI HERMANO !!!!!!!!!

  • @yodiclar
    @yodiclar 3 ปีที่แล้ว +1

    que bueno que esta, bien practico y bien explicado. gracias

  • @jesustejerinarivera4627
    @jesustejerinarivera4627 2 ปีที่แล้ว +1

    Gracias, me sirvió de mucho...

  • @carlosandresramirez9808
    @carlosandresramirez9808 4 ปีที่แล้ว +1

    Gracias por el tutorial Ingeniero y profe Grover. Usted explica muy bien. Saludos!

  • @keane080489
    @keane080489 4 ปีที่แล้ว +1

    Super genial!, me suscribo! estaria bueno otro video donde aun sitio preexistente se le pueda agregar el modal con solo cargar el sitio.

    • @ronaldshumery3409
      @ronaldshumery3409 4 ปีที่แล้ว +1

      mismo procedimiento pero en el evento window.onload

  • @indiadelabsurdo
    @indiadelabsurdo ปีที่แล้ว +1

    Hola! Muy bien explicado, muchas gracias. Pero tengo una duda, hice los tres archivos tal cual explicas pero el botón no me funciona. Estimo que puede tener que ver con el JS, ya que lo que no me funciona son los clicks (si pongo opacidad 1 la ventana está, solo que no logro ni que aparezca ni que se cierre con los clicks). Te agradeceré la respuesta. Gracias!

  • @alexdevjr
    @alexdevjr 4 ปีที่แล้ว +1

    Muy buen video, todos los cursos que he mirado de este canal y en Udemy de Grover son muy bien explicados. Sugiero un curso premium de Laravel

  • @inesgranados2123
    @inesgranados2123 4 ปีที่แล้ว +3

    Excelente tutorial!

  • @fatirga
    @fatirga 2 ปีที่แล้ว

    Que buen video y que bien explicado, vi otros pero el tuyo fue muy claro y conciso

  • @Martinchile743
    @Martinchile743 11 หลายเดือนก่อน

    Amigo no pude accionar el boton con javascript :( Saludos
    Inspeccionando me di cuenta que faltaba un simple guión en modal_container , Muchas gracias por el video.

  • @FireSecret
    @FireSecret 3 ปีที่แล้ว +1

    17:36 cómo sabe javascript que quiere cambiar la opacidad de model_container si nunca se le especificó?

  • @HeadCrusherBMG
    @HeadCrusherBMG 2 ปีที่แล้ว +2

    Hola muy bueno el video, es lo primero que hago en JS, y tengo 2 consultas.
    1- porque lo ocultamos con opacidad y no con display: none y se la agregamos con la clase show
    2- si quiero tener varios botones que hagan lo mismo de abrir un pop up. Tengo que escribir de nuevo todo el codigo de JS con las clases a usar? no puedo usar los mismos id para agregar la misma funcion a open y close?.
    Quizas lo que planteo esta completamente mal, como digo soy novato, estoy aprendiendo JS. Muchas gracias espero su respuesta.

    • @weriad1295
      @weriad1295 2 ปีที่แล้ว

      Hola Puedes usar getelementbyclassname para usar la clase y no el id y puedas usarlo en varios botones, poniendo la clase en cada div que necesites este codigo js

  • @halluna9164
    @halluna9164 ปีที่แล้ว +1

    gracias

  • @cristiancamilo8396
    @cristiancamilo8396 3 ปีที่แล้ว +1

    Buena esa parcero, buen tutorial.

  • @vJeansy
    @vJeansy 2 หลายเดือนก่อน

    Pregunta: el opacity oculta y desabilita el boton o habria que hacer una cpondicional en la funcion?

  • @edsonv240
    @edsonv240 3 ปีที่แล้ว

    Hola , me gusto tu video y tu explicacion!!! una duda nada mas esta ventana modal tiene propiedades responsive?

  • @NathrezimBM
    @NathrezimBM 2 ปีที่แล้ว

    se puede disparar una modal con un ?

  • @tiefsoftwarelab
    @tiefsoftwarelab 4 ปีที่แล้ว

    hello it's my first time here thank you for share have a Good day new friend :)

  • @CAFernandezB
    @CAFernandezB 3 ปีที่แล้ว

    Muy práctico.. Gracias..

  • @CodesignVe
    @CodesignVe ปีที่แล้ว +1

    Amigo una duda, hice todo tal cual, pero el boton no funciona, no hace nada

  • @sebastianrojas8572
    @sebastianrojas8572 4 ปีที่แล้ว

    Buenas, muy bueno el video. Consulta, como debería hacer si quiero que el modal se cargue automáticamente, luego de X segundos de entrar a la web? Lo que busco es hacer un banner de publicidad para mi web. Gracias!

  • @Green_earth_style
    @Green_earth_style 2 ปีที่แล้ว

    hola, excelente video .. consulta, como puedo modificar close.addEventListener('click', () => {
    modal_container.classList.remove('show');
    }); para que en lugar de cerrarse, ingrese a la pagina html que seria la principal??

  • @camilogarcia8974
    @camilogarcia8974 2 ปีที่แล้ว

    Hola Grover, espero que estés bien; me gustaría saber como hacer que la ventana modal salte al abrir la pagina web y sin necesidad de clickear nada, solo entrar a la URL y de una te mande una ventana modal para autenticar edad y posterior a esto ya te muestre la pagina web.
    ¿hay manera? gracias.

  • @hectorab4026
    @hectorab4026 ปีที่แล้ว +1

    por que al final cuando doy clic la ventan abre y cierra rapido ?

    • @grovertec
      @grovertec  ปีที่แล้ว +1

      Revisa si tienes bloqueadas las ventas emergences en tu navegador.

  • @Alvaritodev
    @Alvaritodev 2 ปีที่แล้ว

    Buen video profe, peor una pregunta , como haría en el caso de tener varios modales, tendría que ponerle una clase diferente a cada uno y hacer lo mismo?

    • @Martinha23
      @Martinha23 2 ปีที่แล้ว

      Lo resolviste?

  • @Juanma_
    @Juanma_ 2 ปีที่แล้ว

    Si por ejemplo, eso quiero repetirlo en diferentes apartados de un desplegable ¿cómo lo debería hacer? Porque al repetir el código solo se abre un popup, los demás, no.

  • @ng4136
    @ng4136 3 ปีที่แล้ว

    muy buen contenido, cuando se hace en pantalla completa aparece del lado izquierdo, como habria q poner el codigo para que aparezca centrado en pantalla completa?
    gracias

  • @cesaralejandro7596
    @cesaralejandro7596 3 ปีที่แล้ว +1

    porque todos utilizan texto en latin como ejemplo de texto

  • @viacoronado
    @viacoronado 2 ปีที่แล้ว

    10:29

  • @samueldavidrodartemendoza8291
    @samueldavidrodartemendoza8291 2 ปีที่แล้ว

    Al hacer esto me sale este error "Cannot read properties of undefined (reading 'add')" Alguien me puede ayudar porfavor!!

  •  3 ปีที่แล้ว

    en celular no funciona

  • @Boo-rp8kn
    @Boo-rp8kn 3 ปีที่แล้ว

    NO MAMES TIENES QUE TENER TODO PREPARADO YA UNOS BE COMO HACER UN MALDITO ARCHIVO HTML Y CSSS Y JAVASCRIPT

  • @eleban
    @eleban 2 ปีที่แล้ว

    no me funciono :(

  • @horylanus6013
    @horylanus6013 8 หลายเดือนก่อน

    Una mierda

    • @grovertec
      @grovertec  8 หลายเดือนก่อน

      Jajaja

  • @NameNotAvailableX
    @NameNotAvailableX ปีที่แล้ว

    No explicas casi nada...

    • @grovertec
      @grovertec  ปีที่แล้ว

      Después de ver todos los comentarios y luego el tuyo, solo puedo concluir que esto no es para ti. Suerte ✌🏻.

    • @aaa._.8122
      @aaa._.8122 11 หลายเดือนก่อน

      ​@@grovertecpapee maestro, papee