Muchísimas gracias por este video y por hacerlo tan conciso! Ahora toca ver qué es lo que está interfiriendo porque me queda automáticamente en el margen superior izquierdo jajaja. Recién estoy empezando y no conocía lo del dialog, así que es super útil
una consulta, yo le quiero agregar un modal a un boton que tiene la funcion de adjuntar imagen, es decir abrir el explorardor de archivos del usuario y permitirle seleccionar una foto, quiero ponerle un modal o quizas un alert que advierta algo como "atencion, la imagen debe ser de 2mb". ahora mi duda es como asignarle al boton de adjuntar imagen el modal sin que entren enconflicto las funciones. desde ya muchas gracias!
Hola, Lo que debes hacer es revisar el tamaño del archivo después de que el usuario lo haya seleccionado. Echa un vistazo a esta página www.geeksforgeeks.org/validation-of-file-size-while-uploading-using-javascript-jquery/
Hola, Puedes no usar JavaScript si lo colocas con un formulario: JavaScript should be used to display the element. Use the .showModal() method to display a modal dialog and the .show() method to display a non-modal dialog. The dialog box can be closed using the .close() method or using the dialog method when submitting a that is nested within the element. Modal dialogs can also be closed by pressing the Esc key.
Una pregunta como yo lo que me gustaria seria que el modal sea lo primero que salga en mi sitio al acceder para que el usuario loguee y acceda al sitio
Qué onda, Es bueno verte por acá Si tu sitio es html + js lo que debes hacer es activar el modal en las primeras líneas de tu archivo main de JavaScript O incluso puedes hacerlo directo en el archivo html con ma etiqueta Aunque si se trata de un login es mejor solo simular que es un modal con algún div 🤙🏼
@@lasfito Bro gracias como siempre oye me podrias decir como editar mis repositorios con este editor de guithub que usabas en el tutorial feliz año nuevo
Excelente tutorial, me fue muy útil y ya me suscribí al canal. El contenido del modal lo hice con un form estilo contact us manejado por un php para el envío de la info del usuario a un mail, pero no logro que funcione. Alguna sugerencia o video sobre cómo adaptar esta solución con un form? Gracias!
Si ya tienes montado un servidor con PHP, tan sólo asegúrate de colocar la dirección y métodos correctos en el form. Caso contrario, si quieres probar algún método sin servidor propio puedes probar algunas de las opciones que menciono en este video: 4 formas de enviar correo desde formulario HTML ua-cam.com/video/zXMcoTRTswQ/v-deo.html
hola soy nuevo en tu canal muy bueno tu tu torial y quisiera saber si quiero que este modal se muestre de forma automatica cuando recargue la paguina como hago
Si estás en js y html. Puedes escuchar el evento de domcontentloaded, que es cuando carga la pagina. Cuando este evento se dispare activas el showModal()
Hola, quizá tengas algún estilo afectándolo o será que no lo abriste como modal. Hay una diferencia entre usar show y showModal. En ambos casos puedes aplicar estilos al elemento 🤙🏼
Dependiendo de cómo lo abras ya debería tener esa función añadida (showModal vs open/show). Lo que puedes hacer es añadirle un clickEvent en esa área, se llama backdrop
Hola, ¿Te refieres a que sea modal ? De ser así, no sé :v Supongo que sí, aunque siento que no es una buena experiencia. ¿Por qué dirigirlos al hacer clic en cualquier parte del modal y no en un botón o texto específico? 🤔
@@lasfito ok ya pude programar Muchísimas gracias por el tiempo que dedicas Lo único que no me anduvo es la parte que deja en transparencia el fondo Veré🙄
Excelente tutorial, lasfito tengo un problema, intento crear varios cta para generar este pop up e hice el cambio de Id a Class para poderlo replicar pero solo me ejecuta un bóton, hay manera de que funcione en multiples botones?
@@marolynregueiro9676 Si usas algún constructor como Elementor sería cosa de usar la opción de código html, caso contrario, es necesario editar el tema o usar el editor de gutenberg,
Hola como está, buen video. Tengo una pregunta: porqué una ventana modal no permite ver una pagina externa es decir, que en la ventana emergente se visualice otro sitio web con una url diferente como por ejemplo con un video de youtube pues aparece www.youtube.com refused to connect (www.youtube.com se negó a conectarse)
1) Hay reglas para colocar un . No puedes meterlo dentro de ciertas etiquetas. 2) en tu caso, lo que ocurre es que los sitios deciden mostrarse o no a través . En este caso, UA-cam bloquea los llamados a videos. Para mostrar videos de YT debes usar su forma embebida.
No entiendo como no tiene mas suscriptores este canal. Sus explicaciones concisas y al punto, no quisiera ver un vídeo de una hora para hacer un modal
“Sin relleno” es mi filosofía jaja
Espero te sirva 🤙🏼
Buscaba esto hace un tiempo y directo al grano... mil gracias
Por nada, Kenni.
Solo tutoriales sin relleno por acá 😎
Muchas gracias amigo, he estado buscando un tutorial de ventanas modales, y este ha sido el mas claro y directo que he visto
Gracias, Roney
Espero que te haya servido 🤙🏼
Con este video tan genial que acabo de ver, me acabo de suscribir a tu canal. Eres un crack!!!
Gracias, Fritz 🤙🏼
Wuaoo!! Increíble tuto, buen tono de voz, es agradable. Ayuda a concentrarme, new subs 💪
Gracias, Roger ✌🏼
@@lasfito no hay de que hermano, está es una pequeña manera de agradecerte por el conocimiento que otorgas, bendiciones 🔥💪
Una forma tan facilmy sencilla para lograr el mismo objetivo de mostrarte el popup, muchas gracias por el tutorial
Sí, más sencilla y menos conocida al parecer. Saludos 🤙🏼
Sabes explicar muy bien y tu voz ayuda a concentrarse
Gracias ✌🏼
Excelente tutoril, muchas gracias, muy claro y directo. 😃👍
Gracias, José
Espero que te haya servido 🤙🏼
acabo de aprender algo mas
me fue de mucha ayuda, eres un crack
Gracias ✌🏼
Muy buen tutorial. Excelente! Y explicado Super claro... Gracias
Gracias, Manz ✌🏼
un nuevo suscriptor por compartir conocimiento😃
Bienvenido ✌🏼
Wow amigo, muchas gracias por el tutorial, no sabia sobre esto y ahora me será muy útil
Por nada, espero le saques provecho. Es muy útil la nueva forma 7u7
Increíble video, me ayudaste un montón. Super claro y rápido 💯❤🔥
Gracias, Paola
Saludos ✌🏼
Toma tu like buen hombre
Gracias
@@lasfitoEn este momento voy a aplicarlo, vi que en tus videos más recientes vives en Japón, increíble
@itzcamilo-kun8881 y todo comenzó haciendo modales en HTML :v
Muchísimas gracias por este video y por hacerlo tan conciso! Ahora toca ver qué es lo que está interfiriendo porque me queda automáticamente en el margen superior izquierdo jajaja. Recién estoy empezando y no conocía lo del dialog, así que es super útil
Gracias, ojalá puedas resolver ese problema ✌🏼
Buen video sobrino, saludos.
Grax, tío :v
Parce eres un teso la positiva amigo fuerte abraso
Gracias, Mao
Un abrazo 🤙🏼
Muy buen video, directo y funcional.
Gracias José 🤙🏼
Bazanazo hermano, gracias me sirvio bastante
Me alegra, esa es la intención con estos videos 🤙🏼
gracias men, me salvaste la chamba
🤙🏼
Muy bueno, no sabia de esto, gracias
Gracias, Fede
Espero que te haya servido ✌🏼
Gracias, muy clara la info
De nada, Billy
Espero que te haya servido ✌️
buen video compa
Gracias, compa 🤙🏼
Hola, quiero agregarle un dentro del dialog y no me deja, no me quedara otra que hacerlo con divs no?
Qué o quién no te deja? El linter te tira error o el no funciona?
@@lasfito el no funciona, no se muestra dentro del popup, pero si cualquier otro tag
@@tomasvalentinperuilh1230 Parece entonces que no lo permite. No estaría de más que lo confirmaras en la documentación de W3C
@@lasfito igusl pude hacerlo con divs, no costo mucho, muchas gracias
Amigo y si ocupo pasar el metodo post como lo hago si tu colocaste como method Dialog?
Hola, Miguel
¿A qué te refieres?
Hola, me pasa que no me toma el showModal como funcion (no cambia de color y no funciona). Me toma solo Show. Que puede ser?
Hmmmm, dificil saberlo sin tener el código a la mano.
¿Replicaste el código del repositorio?
una consulta, yo le quiero agregar un modal a un boton que tiene la funcion de adjuntar imagen, es decir abrir el explorardor de archivos del usuario y permitirle seleccionar una foto, quiero ponerle un modal o quizas un alert que advierta algo como "atencion, la imagen debe ser de 2mb". ahora mi duda es como asignarle al boton de adjuntar imagen el modal sin que entren enconflicto las funciones. desde ya muchas gracias!
Hola,
Lo que debes hacer es revisar el tamaño del archivo después de que el usuario lo haya seleccionado.
Echa un vistazo a esta página
www.geeksforgeeks.org/validation-of-file-size-while-uploading-using-javascript-jquery/
@@lasfito gracias por responder lo voy a ver!
hola tengo una duda, para poder hacer esto si o si se va a necesitar javascript o podria hacerse de una manera mas simple solo con html y css?
Hola,
Puedes no usar JavaScript si lo colocas con un formulario:
JavaScript should be used to display the element. Use the .showModal() method to display a modal dialog and the .show() method to display a non-modal dialog. The dialog box can be closed using the .close() method or using the dialog method when submitting a that is nested within the element. Modal dialogs can also be closed by pressing the Esc key.
una duda, como hago para mandar la información de un modal con formulario a una tabla en el mismo html?
Necesitarías un servidor o usar JavaScript
@@lasfito quiero hacerlo con Javascript, recomiendas algún vídeo o guía?
Depende, cuánto sabes de js? Trabajas con algún framework?
@@lasfito soy estudiante y no me enseñaron mucho sobre js pero conozco "lo básico"
@@lasfito y sobre servidor según yo no me enseñaron nada
Una pregunta como yo lo que me gustaria seria que el modal sea lo primero que salga en mi sitio al acceder para que el usuario loguee y acceda al sitio
Qué onda,
Es bueno verte por acá
Si tu sitio es html + js lo que debes hacer es activar el modal en las primeras líneas de tu archivo main de JavaScript
O incluso puedes hacerlo directo en el archivo html con ma etiqueta
Aunque si se trata de un login es mejor solo simular que es un modal con algún div 🤙🏼
@@lasfito Bro gracias como siempre oye me podrias decir como editar mis repositorios con este editor de guithub que usabas en el tutorial
feliz año nuevo
el metodo tiene que ser dialog, pero digamos que lo necesito metodo post, puede tener dos metodos?
Sí, con ayuda de JavaScript
Y colo pudiera hacer para enviar un formulario desde el modal y a su vez cerrarlo?
JavaScript :v
Añade un onSubmit, envías la Info y desde ahí cierras el modal con un useRef o querySelector
Buenas, si quiero hacer uso de el modal en un boton login en el header, tendria que repetir(copiar) el codigo en todas las paginas verdad?
Si estás en HTML, sí. Si usas algún framework puedes guardar el
Componente como parte del layout ✌🏼
Muy conciso y bueno, pero mi duda es de dónde sacas la info? Más bien con qué términos buscas la documentación,por ejemplo, de esa etiqueta.
Del buen MDN Web Docs ✌🏼
Excelente tutorial, me fue muy útil y ya me suscribí al canal. El contenido del modal lo hice con un form estilo contact us manejado por un php para el envío de la info del usuario a un mail, pero no logro que funcione. Alguna sugerencia o video sobre cómo adaptar esta solución con un form? Gracias!
Si ya tienes montado un servidor con PHP, tan sólo asegúrate de colocar la dirección y métodos correctos en el form. Caso contrario, si quieres probar algún método sin servidor propio puedes probar algunas de las opciones que menciono en este video:
4 formas de enviar correo desde formulario HTML
ua-cam.com/video/zXMcoTRTswQ/v-deo.html
Que librerías debo importar? Porque me dice showModal no es una función
Ninguna.
Esto es nativo de HTML/navegador.
Asegúrate de llamar showModal en un objeto
Mi error fue que quise hacerlo accediendo directamente.
De esta manera #("#modal").showModal() no funciona;
Muchas gracias por tus aportes, excelentes videos!
hola soy nuevo en tu canal
muy bueno tu tu torial y quisiera saber si quiero que este modal se muestre de forma automatica cuando recargue la paguina como hago
Si estás en js y html. Puedes escuchar el evento de domcontentloaded, que es cuando carga la pagina. Cuando este evento se dispare activas el showModal()
descubriste la polvora , gracias
Gracias, Alejandro
Espero que te sirva 🤙🏼
excelente video, un pequeño detalle, mi ventana no se centra, porque puede ser? y si se puede arreglar manualmente en el css, como podria hacerlo?
Hola,
quizá tengas algún estilo afectándolo o será que no lo abriste como modal.
Hay una diferencia entre usar show y showModal. En ambos casos puedes aplicar estilos al elemento 🤙🏼
@@lasfito Se resolvio, muchas gracias! me alegra ver que le dediques tiempo a responder dudas, que grande
@@balitastimeu7772 Por acá andamos 😎
@@balitastimeu7772 como lo resolviste!! me pasa lo mismo no me deja centrarlo , y cuando lo centro me aparece antes de abrirlo
Lasfito, ¿como puedo hacer para que se cierre cuando se clickee fuera del modal?
Dependiendo de cómo lo abras ya debería tener esa función añadida (showModal vs open/show). Lo que puedes hacer es añadirle un clickEvent en esa área, se llama backdrop
Hola una pregunta el modal también puede ser hecho desde una etiqueta de enlace?. Como por ejemplo
Hola,
¿Te refieres a que sea modal ?
De ser así, no sé :v Supongo que sí, aunque siento que no es una buena experiencia. ¿Por qué dirigirlos al hacer clic en cualquier parte del modal y no en un botón o texto específico? 🤔
super contenido
Gracias, Deiby
Espero que te haya servido :)
Excelente!
Gracias, Juan
Espero te sirva ✌🏼
Gracias, Juan
Espero te sirva ✌🏼
Hola, ¿cómo se llama la carpeta del Github donde tienes este ejemplo?
Hola, Lau
Para este tutorial no tengo código, pero los demás los encuentras en lasfito/tutoriales
@@lasfito ok ya pude programar
Muchísimas gracias por el tiempo que dedicas
Lo único que no me anduvo es la parte que deja en transparencia el fondo
Veré🙄
Hola bro, excelente vídeo, una pregunta, en que parte de tu repositorio se encuentra el modal. muchas gracias!
Gracias Kev
Para este video no hay código de ejemplo.
Excelente tutorial, lasfito tengo un problema, intento crear varios cta para generar este pop up e hice el cambio de Id a Class para poderlo replicar pero solo me ejecuta un bóton, hay manera de que funcione en multiples botones?
¿Por qué no agregas a todos estos CTA la misma función?
De esta manera al hacer clic en cualquiera de ellos deberían abrir el mismo modal.
Buen video bro me sirvió a la primera, para hacer un popup que aparezca desde que se abre la página?
Con javascript creas un temporizador o agregas un eventListener al evento de carga y entonces ejecutas el open() del modal 🤙🏼
@@lasfito como sería eso?
lo hice tal cual y no me funciono, y no entiendo donde tengo el error :(
Puedes compartir tu código?
buen video, este modal puede contener un formulario POST que envié los datos del formulario aun correo, saludos
Es correcto, se puede insertar un formulario en su interior.
Saludos 🤙🏼
Excelente tutorial. Es posible integrar el código en WordPress? Muchas gracias!
Hola, Marolyn
Sí es posible sin mayor problema ✌🏼
@@lasfito ¿y cómo sería el procedimiento? porque habría que poner el enlace a una palabra o frase específica. Muchas gracias
@@marolynregueiro9676 Si usas algún constructor como Elementor sería cosa de usar la opción de código html, caso contrario, es necesario editar el tema o usar el editor de gutenberg,
crei que era para lo que necesitaba queria que se abrieran otros modales con un mismo boton y no e podido
Hola, podrías ser más específico? Qué es lo que quieres hacer exactamente?
no explicas como mandarlo a llamar el javascript desde el index
Ciertamente, eso está fuera del enfoque del tutorial.
broo no me deja y no se porque :(
Pasa más detalles
Nop
🤨
Hola como está, buen video. Tengo una pregunta: porqué una ventana modal no permite ver una pagina externa es decir, que en la ventana emergente se visualice otro sitio web con una url diferente como por ejemplo con un video de youtube pues aparece www.youtube.com refused to connect (www.youtube.com se negó a conectarse)
1) Hay reglas para colocar un . No puedes meterlo dentro de ciertas etiquetas.
2) en tu caso, lo que ocurre es que los sitios deciden mostrarse o no a través . En este caso, UA-cam bloquea los llamados a videos. Para mostrar videos de YT debes usar su forma embebida.
Excelente!!!
Gracias, José
Un saludo 🤙🏼