¡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'); }
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!!!
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!
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.
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.
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
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!
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??
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.
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?
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.
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
¡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');
}
Otro más que vió varios videos pero el tuyo es el más sencillo y facil de entender sin tanta cosa extra.
Un ángel informático me ha salvado, gracias, de verdad muchas gracias!
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!!!
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
Buenardo el video, muchas gracias.
Excelente!!! Me ha resultado muy útil!!! Muy didáctica tu explicación!!! 👏👏👏
excelente video todo lo que ocupaba bro... me suscribo
Gracias
Muy bien explicado estimado.
geniooooo! me savaste jje
excelente!!! gracias!!!
Muy bien explicado, gracias, e visto varios videos y este es el que mas entendí
Excelente! Simple y paso a paso. Muchas gracias!
me gustan bastante tus videos !! tienes una forma de programar muy parecida a la mia EXITOS MI HERMANO !!!!!!!!!
que bueno que esta, bien practico y bien explicado. gracias
Gracias, me sirvió de mucho...
Gracias por el tutorial Ingeniero y profe Grover. Usted explica muy bien. Saludos!
Super genial!, me suscribo! estaria bueno otro video donde aun sitio preexistente se le pueda agregar el modal con solo cargar el sitio.
mismo procedimiento pero en el evento window.onload
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!
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
Excelente tutorial!
Que buen video y que bien explicado, vi otros pero el tuyo fue muy claro y conciso
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.
17:36 cómo sabe javascript que quiere cambiar la opacidad de model_container si nunca se le especificó?
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.
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
gracias
Buena esa parcero, buen tutorial.
Pregunta: el opacity oculta y desabilita el boton o habria que hacer una cpondicional en la funcion?
Hola , me gusto tu video y tu explicacion!!! una duda nada mas esta ventana modal tiene propiedades responsive?
se puede disparar una modal con un ?
hello it's my first time here thank you for share have a Good day new friend :)
Muy práctico.. Gracias..
Amigo una duda, hice todo tal cual, pero el boton no funciona, no hace nada
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!
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??
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.
por que al final cuando doy clic la ventan abre y cierra rapido ?
Revisa si tienes bloqueadas las ventas emergences en tu navegador.
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?
Lo resolviste?
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.
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
porque todos utilizan texto en latin como ejemplo de texto
10:29
Al hacer esto me sale este error "Cannot read properties of undefined (reading 'add')" Alguien me puede ayudar porfavor!!
en celular no funciona
NO MAMES TIENES QUE TENER TODO PREPARADO YA UNOS BE COMO HACER UN MALDITO ARCHIVO HTML Y CSSS Y JAVASCRIPT
no me funciono :(
Una mierda
Jajaja
No explicas casi nada...
Después de ver todos los comentarios y luego el tuyo, solo puedo concluir que esto no es para ti. Suerte ✌🏻.
@@grovertecpapee maestro, papee