JavaScript - Ventana modal con navegacion

 
Vista:
sin imagen de perfil
Val: 4
Ha disminuido su posición en 59 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ventana modal con navegacion

Publicado por Alvaro (4 intervenciones) el 18/02/2020 12:31:07
Hola!
Soy bastante nuevo en esto y no se si existe esta posibilidad.

Quería saber si se puede crear una ventana emergente, no un popup, que al abrirse todos los enlaces de esa ventana se carguen en la misma, seria poder navegar en esa ventana.

https://www.pexels.com/es-es como en esta página, cuando hacen clic en las imágenes se abren en una ventana emergente y se puede seguir navegando en esa ventana, no se cierra sino que se actualiza.

Seria, al hacer clic en un enlace, abra una ventana emergente, y que los enlaces que se encuentran en esa ventana se abran ahí mismo, que no se cierre la ventana o me envié a un ventana en pantalla complenta.

Desde ya mcuhas gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Julio
Val: 60
Ha disminuido 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ventana modal con navegacion

Publicado por Julio (17 intervenciones) el 18/02/2020 13:21:43
Hola.

La ventana emergente que indicas existe desde el principio y está en el código HTML (puedes buscarla sin problemas). Pero está oculta y por eso no la ves. Cuando aprietas a cualquier imagen, lo que tienes en JavaScript es un código que hace que, si pulsas en esa imagen, se ponga como visible el trozo HTML que corresponde a esa imagen.

No está haciendo un alert ni cosas así de JavaScript, sino que el concepto es más sencillo. Un trozo de HTML que "está ahí pero invisible" y un evento JavaScript que, cuando hace clic en el enlace o donde tú quieras, aparezca (la X de esa ventanita hará lo contrario, volverá a ponerlo como oculto).

-----------------------------
Aprende la programación desde una perspectiva básica y simplista en Programación Básica
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 4
Ha disminuido su posición en 59 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ventana modal con navegacion

Publicado por Alvaro (4 intervenciones) el 18/02/2020 13:34:23
Gracias por responder. Intentando con css y html pude crear la ventana emergente con el contenido y todo. No puedo solucionar que se pueda navegar dentro de la ventana, la idea de lo que quiero hacer es exactamente al de la pagina https://www.pexels.com/es-es/, que cuando se hace clic en la imagen miniatura, esta se abre en una ventana, donde tambien aparecen imagenes similares, y cuando se hace clic en una de las imagenes similares, se abren en la misma ventana. Eso no puedo lograrlo con html y css, no se si se puede hacer, por eso estoy intentando con javascript. Pero no se como hacerlo.

Gracias nuevamente!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Julio
Val: 60
Ha disminuido 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ventana modal con navegacion

Publicado por Julio (17 intervenciones) el 18/02/2020 16:17:52
Hola.

Ahí me he perdido. Dices que ya tienes creada la ventana emergente con todo el contenido. ¿Entonces qué necesitas hacer ahora?

-----------------------------
Aprende la programación desde una perspectiva básica y simplista en Programación Básica
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 4
Ha disminuido su posición en 59 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ventana modal con navegacion

Publicado por Alvaro (4 intervenciones) el 19/02/2020 01:06:31
Lo que necesito es que al hacer clic en el contenido dentro de la ventana modal, ese se vea en el modal, pero lo que ocurre es que se abre como un enlace normal y no en la ventana modal.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 60
Ha aumentado su posición en 3 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ventana modal con navegacion

Publicado por Marlon (13 intervenciones) el 19/02/2020 03:17:44
Lo que buscas se llama Modal html
Si no estoy mal, lo que hace esa pagina es cargar los datos del link de la imagen en un DIV el cual llaman "modal".
Para que me entiendas, toda imagen de ese sitio tiene un link de referencia, pero lo que hace es desplegar la información de dicho link en ese div, no es que en si cargue un documento html en ese modal.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Fran
Val: 33
Ha disminuido su posición en 3 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ventana modal con navegacion

Publicado por Fran (10 intervenciones) el 19/02/2020 03:16:18
Es un simple html... primero crea la página index.html y en alguna etiqueta div del body ponle un ancor, por ejemplo

1
<div> <a href="#modalContenido"></a></div>

Es ahí donde darán click para ver las fotos que están en la vista principal... ahora debes crear otro div al final del body donde incluirás y crearas otra página, "por así decirlo" (el modal grande) donde se visualizara todo el contenido... a este div del contenido, donde podrás navegar.. debes agregar un id por ejemplo

1
<div id="modalContenido"> y de aqui dentro en adelante incluyes toda la programación etiquetas, tablas, etc.. para darle actividad al modal</div>

Para facilitarte crear un modal grande, usa Bootstrap y busca sobre la documentación de ventanas modales. Esto te servirá solo para maquetar el sitio... para darle actividad y que sea dinámico debes trabajar el modal con lenguajes de programación como por ejemplo PHP, JavaScript Ajax etc...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 4
Ha disminuido su posición en 59 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ventana modal con navegacion

Publicado por Alvaro (4 intervenciones) el 19/02/2020 12:01:06
Hola, muchas gracias a todos por responder.

Esto es lo que conseguí hasta el momento, aclaro que estoy usando wordpress, perdón por no haberlo aclarado antes.
La ventana modal es solo html y css

pasos

Al hacer clic en una imagen de la galería (1), esta se abre en un popup (2), donde figura el nombre del autor, un botón para descargar y las imágenes relacionadas, como se ve en la imagen. El problema es que al hacer clic en las imágenes relacionadas (3), el popup se cierra y abre la pagina en una pantalla completa (4). Lo que quiero lograr es que se refresque el popup con la nueva imagen.
En el punto 4 se puede ver que el popup se cierra y se ve el contenido en la pantalla completa del explorador
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Fran
Val: 33
Ha disminuido su posición en 3 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ventana modal con navegacion

Publicado por Fran (10 intervenciones) el 19/02/2020 19:26:48
Eso que quieres no es refrescar... utilizar jQuery para cargar contenido sin recargar la página.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 1.523
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ventana modal con navegacion

Publicado por ScriptShow (644 intervenciones) el 20/02/2020 12:18:29
Saludos Álvaro,

a ver si te sirve adaptando este Script que he publicado en LWP:

https://www.lawebdelprogramador.com/codigo/JavaScript/5941-Grid-Foto-Simple.html

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar