Dios excelente video, saber que eso se puede hacer con imagenes png me abre la mente a muchos estilos y cosas más, cambié el link de frase"abrir ventana" por un bottom onclick y sirve perfecto. Muchas gracias capo.
he visto muchos videos en youtube, pero a mi parecer ninguno explica tan bien y de manera tan concisa, excepto en tus videos, mis respetos y felicidades, un suscriptor mas saludos!
Para los que quieran que el DIV "ventana flotante" se mueva junto con el SCROLL (no importa si mueves hacia arriba o hacia abajo la pagina... el DIV siempre estará en el centro siguiéndote) solo le ponen en css "position: fixed;"
Cuando le doy en el boton de cerrar me cierra todo el frame y yo solo quiero que me cierre el div,me sale esto"es posible que se haya movido o eliminado" ayudaa porfa!
Genial Spencer. Como podría hacer más ventanas flotantes de diferentes tamaños llamando a la misma clase?? Estoy intentando hacer una segunda ventana y no lo consigo. No me coge el background y no responde a los ajustes que le hago en cuanto a medidas. Al final solo he podido modificar el div con la propiedad style, y lo tengo casi, pero no consigo reducir el height de ninguna de las maneras!! :-(
Hermano necesito aplicar este método pero no en una ventana div, sino a un html donde corre un sistema de mensajeria instantanea, es decir, para que esa ventana aparezca y la pueda cerrar... hasta ahora la tengo en un - fixed - dentro del html index, pero me resta espacio y visibilidad. Necesito que sea como la ventana de mensajeria de facebook, POR EJEMPLO, pero no exactamente así porque esos servicios son pagos o con internet y yo lo hice correr en localhost y a los chicos les gustó y le sacan provecho
Hola #Spencerzapatasalinas , muy buen video me sirvio de mucho solo tengo una pequeña duda, como hago para que se cierre al dar clic fuera del cuadro del popup?
esta bien explicado pero para una persona que esta estudiando bajo una metodología. solo sirve para un archivo. si deseas trabajar html ccs y javascript por separado no servirá. y la metodologia que se debe enseñar es por separado y conectandolos. son pocos los programadores que tienen una metodologia estructural. por ejemplo a mi no me sirve. pero tomo la idea, gracias
hola muy buen video solo hay un pequeño problemita, al momento que centras la ventana la estas ajustando al tipo de monitor que tienes, al momento de subirlo al hosting y abro la pagina en otra computadora que el monitor tiene otro tamaño ahi ya no sale centrado entonces la pregunta es si tu para centrarlo estas utilizando left: 34%; que necesito cambiarle para que se centre en forma automatica ya sea en cualquier monitor?
Hermano está muy bueno tu video, muy necesario para mi proyecto de trabajo, el cual utilizo con los niños en una sala de computación escolar, PERO NO PUEDO DESCARGAR LOS ARCHIVOS. . .Tengo una digiteca donde trabajo con ellos materiales académicos y tecnológicos, adaptados y accesibles aun sin internet. Por favor podrias arreglar el link o enviarmelos???
Seguro no te sirve ya, pero te respondo. En vez de usar display, usa z-index y opacity, y le pones un transition= 1s y quedará bien. En el script debes poner zIndex para que te lea bien.
Tengo 2 iconos diferentes, el primero lo comente con id o , o no, funciona pero al segundo icono si le pongo function apagar(){ document.getElementById("miModal").style.display="none"; } me bloquea el primer icono y ya no lo puedo utilizar el primero ¿como hago para que me desbloquee el primer icono o no le afecte?
se me ocurre que hagas una funcion en JS que lo ejecute antes de que se cargue el documento. Y que al cerrar, continue con el documento. Muy buena idea para mensajes importantes, si lo logras, me dejas saber por favor.
![Como CREAR una ventana MODAL ✅ [ HTML CSS Y JavaScript ]](/img/1.gif)
Dios excelente video, saber que eso se puede hacer con imagenes png me abre la mente a muchos estilos y cosas más, cambié el link de frase"abrir ventana" por un bottom onclick y sirve perfecto. Muchas gracias capo.
he visto muchos videos en youtube, pero a mi parecer ninguno explica tan bien y de manera tan concisa, excepto en tus videos, mis respetos y felicidades, un suscriptor mas
saludos!
Excelente amigo muchas gracias, claro y conciso 👌
perfecto ,re sencillo como debe ser, felicitaciones
Para los que quieran que el DIV "ventana flotante" se mueva junto con el SCROLL (no importa si mueves hacia arriba o hacia abajo la pagina... el DIV siempre estará en el centro siguiéndote) solo le ponen en css "position: fixed;"
y como hacer para que aparesca sin apretar ningun enlace
@@jonathanchiclla3221 supieste como ?? yo quiero que al iniciar la pagina salga
@@TheGanzDrPuedes usar la funcionar windows.onload()
@@jonathanchiclla3221 pues simplemente quítale el display:none para q aparezca al carga o tmb con el onload
Muchas gracias. Su video me ayudó mucho con una práctica.
Muchas gracias por el video, le deseo todo lo mejor sr Spencer Zapata.
Excelente explicación, sencilla, y directa. Lo recomiendo aún sin los archivos es muy sencillo de practicar con una ventana simple.
Muchas gracias, por tomarte el tiempo de hacer este video...es muy util
Gracias excelente explicación, muy claro y didactico
muchas gracias! andaba algo perdido con el css me sirvió de mucha ayuda
Me ayudaste mucho bro saludos eres un crack
muchas gracias , maestro, buen dia.
Muchas gracias tu tutorial fue de gran ayuda. y de paso me suscribí :)
Genial la forma en la que explicas, te agradezco mucho por este video
Muchísimas gracias de verdad! me sirvió mucho gracias
Gracias Spencer, me sirvió mucho
Me sirvió muchísimo, muchas gracias!!!
Genial colega lo que estaba buscando
¡Muchas gracias! Me fue de mucha ayuda.
Excelente explicación!! Muchas gracias. Slds.
Excelente tutorial Spencer.
👏🏻👏🏻👏🏻muy útil
Exelente video, Gracias por todo
gracias, me sirvió de mucho
Hola amigo yo quiero que salga la ventana emergente sin necesidad de darle clic, quiero que salga en primer plano al abrir la pagina web. Como hago?
Excelente....
Sos un maquina, muchisimas gracias
Buenísimo video crack
Muy bien
Excelente
muy buena me gusta tu contenido
Buen video amigo
Se puede animar el abrir y cerrar la ventana?
Aquí el código:
.ventana {
background-color: rgb(0 0 0 / 0.80);
width: 30%;
color: rebeccapurple;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-align: center;
padding: 33px;
min-height: 250px;
border-radius: 22px;
position: absolute;
left: 33%;
top: 30%;
display: none;
}
Hola
Cerrar
Abrir ventana
function abrir() {
document.getElementById("vent").style.display = "block";
}
function cerrar() {
document.getElementById("vent").style.display = "none";
}
excelente (Y) buena explicación
hola, me podrían ayudar ¿Cómo puedo hacer para ocupar la misma función script para diferentes enlaces? por favor
Eres un crack, sub!!
genial amigo se paso
Muchas gracias
Bien explicado!!!!
muy bueno
excelente!!!
Como se podria hacer que ese modal solo se ejecute la 1era vez que el usuario visita la pagina? 🤔
Y si quisiera que la ventana se cierre al hacer click en cualquier lado de la página fuera del popup como haría eso con JavaScript? Gracias
Cuando le doy en el boton de cerrar me cierra todo el frame y yo solo quiero que me cierre el div,me sale esto"es posible que se haya movido o eliminado" ayudaa porfa!
Genial Spencer. Como podría hacer más ventanas flotantes de diferentes tamaños llamando a la misma clase?? Estoy intentando hacer una segunda ventana y no lo consigo. No me coge el background y no responde a los ajustes que le hago en cuanto a medidas. Al final solo he podido modificar el div con la propiedad style, y lo tengo casi, pero no consigo reducir el height de ninguna de las maneras!! :-(
Persona Spencer, ya lo solucioné: en los styles de la div añadi min-height y funciona. Gracias!! Un saludo.
el link esta roto
EXCELENTE I LOVE
Gracias
Hermano necesito aplicar este método pero no en una ventana div, sino a un html donde corre un sistema de mensajeria instantanea, es decir, para que esa ventana aparezca y la pueda cerrar... hasta ahora la tengo en un - fixed - dentro del html index, pero me resta espacio y visibilidad. Necesito que sea como la ventana de mensajeria de facebook, POR EJEMPLO, pero no exactamente así porque esos servicios son pagos o con internet y yo lo hice correr en localhost y a los chicos les gustó y le sacan provecho
Si sirve 🥵
Hola
#Spencerzapatasalinas , muy buen video me sirvio de mucho
solo tengo una pequeña duda, como hago para que se cierre al dar clic fuera del cuadro del popup?
Hola, supiste como hacerlo?
Me re sirvió. Pero me quedo una duda, para que sirve el id del icono "cerrar"?
pero como se hace para que aparesca sin apretar ningun boton .. solo abriendo la pagina web... sr
esta bien explicado pero para una persona que esta estudiando bajo una metodología. solo sirve para un archivo. si deseas trabajar html ccs y javascript por separado no servirá. y la metodologia que se debe enseñar es por separado y conectandolos. son pocos los programadores que tienen una metodologia estructural. por ejemplo a mi no me sirve. pero tomo la idea, gracias
hola muy buen video solo hay un pequeño problemita, al momento que centras la ventana la estas ajustando al tipo de monitor que tienes, al momento de subirlo al hosting y abro la pagina en otra computadora que el monitor tiene otro tamaño ahi ya no sale centrado entonces la pregunta es si tu para centrarlo estas utilizando left: 34%; que necesito cambiarle para que se centre en forma automatica ya sea en cualquier monitor?
top: 50%; para bajarlo y este siempre a mitad
left: 50%;
Hermano está muy bueno tu video, muy necesario para mi proyecto de trabajo, el cual utilizo con los niños en una sala de computación escolar, PERO NO PUEDO DESCARGAR LOS ARCHIVOS. . .Tengo una digiteca donde trabajo con ellos materiales académicos y tecnológicos, adaptados y accesibles aun sin internet. Por favor podrias arreglar el link o enviarmelos???
No y no olvides suscribirte
todo excelente ahora coo hago para darle efecto de transición y no se vea tosco
Seguro no te sirve ya, pero te respondo. En vez de usar display, usa z-index y opacity, y le pones un transition= 1s y quedará bien. En el script debes poner zIndex para que te lea bien.
increíble la forma de explicar, pero no me abre la pagina para descargar los materiales :(
No srieve el link para descargar amigo, excelente video
Tengo 2 iconos diferentes, el primero lo comente con id o , o no, funciona
pero al segundo icono si le pongo
function apagar(){
document.getElementById("miModal").style.display="none";
}
me bloquea el primer icono y ya no lo puedo utilizar el primero
¿como hago para que me desbloquee el primer icono o no le afecte?
Se puede desplazar? Moverla?
queiro descargar pero me sale ; ERR_CONNECTION_TIMED_OUT
Me asuste cuando escuche JavaScript...
no puedo ingresar a descargar los materiales :(
Como puedo hacer para poner el fondo oscuro y no poder seleccionar otro pop up hasta que cierre el actual??
se me ocurre que hagas una funcion en JS que lo ejecute antes de que se cargue el documento. Y que al cerrar, continue con el documento. Muy buena idea para mensajes importantes, si lo logras, me dejas saber por favor.
hola buen video, pero como hago para que la ventana se abra automaticamente
no funciona el link :/
no me funciona el link para descargar los materiales :(
pero tu que fumas chenior