jquery modal-dialog pinterest

jquery - ¿Cómo puedo duplicar el efecto modal del sitio web de Pinterest?



modal-dialog (5)

¿Qué tal prettyPhoto ? Agrega #prettyPhoto [gallery] / x / a la URL.

Me gustaría crear el mismo efecto que en Pinterest al hacer clic en una imagen: se abre una ventana modal pero también cambia la URL de la página. Esta última parte es crucial: la URL en la barra de direcciones del navegador ha cambiado, pero todavía vemos el contenido de la página original en segundo plano (es por eso que lo llamo modal, aunque puede ser mucho más complicado que eso). Idealmente estoy buscando una solución jQuery.

[edit] Debo añadir que, por supuesto, el comportamiento de Pinterest no rompe el botón Atrás, que es, de nuevo, crucial.

Aquí hay un ejemplo con un poco de código con un diálogo modal JQuery.

http://jsfiddle.net/aDCQL/2/

Esto es realmente solo una prueba de concepto y posiblemente podría ampliarse sobre ...

Utilizando una biblioteca hash, puede realizar ciertas funciones basadas en una URL y proporcionar enlaces directos a esas mismas funciones. Esta biblioteca es compatible con todos los navegadores que nos interesan.

También existen bibliotecas de enrutamiento de rutas reales que también simplifican algunas de estas definiciones de ruta.

https://github.com/cowboy/jquery-hashchange

Esta es mi evaluación de cómo Pinterest logra su aspecto modal único y cómo duplicarlo.

En primer lugar, el manejo del enlace URL se analiza en el lado del servidor para ver si el enlace se origina en el propio sitio de Pinterest. Dicho esto, la barra e historial de direcciones URL de los navegadores se crean dinámicamente y el visitante no realiza realmente .

Para aclarar: ¡ La barra de direcciones no es el lugar real en el que se encuentra cuando se está llevando a cabo una experiencia modelo! Para probar esto, haga clic en un objeto de Pinterest y, cuando esté en la vista modal, vaya a la Barra de direcciones y al final de esa ubicación de URL coloque el cursor del mouse allí y luego haga clic en Entrar . ¡Entonces te redirigirás a esa ubicación ! Para una mayor verificación de que nunca salió de la página de inicio, vea Net Tab en Firebug / Firefox o Network Tab en Chrome.

El siguiente método es lo que Pinterest está haciendo cuando visita la página de inicio. Por favor, mira con cautela:

  1. Mostrar página de inicio.
  2. Espere a que el visitante haga clic en un objeto de Pinterest.
  3. El objeto cliqueado tiene una página web única para acceso directo.
  4. El objeto pulsado no se sigue.
  5. La barra del navegador se llenará con esta ubicación de los objetos en los que se hizo clic, pero no se encuentra realmente allí.
  6. El historial del navegador recibirá una ubicación en la que se haga clic a través del procesamiento JavaScrict o Server-Side.
  7. AJAX cargará una pieza de datos (fuente de modal a través de ID) desde la página del objeto. Verificable a través de HTTPRequest.
  8. El objeto en el que se hizo clic en la página principal ha desaparecido (esto se puede verificar a través del elemento Inspeccionar).
  9. El proceso AJAX colocará esa información en el centro de la pantalla con una superposición blanca.
  10. El desplazamiento de la página principal está desactivado, mientras que los datos "modales" de AJAX reciben eventos de desplazamiento a través de #zoomScroll .
  11. Al hacer clic en el fondo modal, se devuelve el objeto a la página web y se revierte "visualmente" la barra de direcciones URL.

Para recrear el efecto de modelo que usa Pinterest , investigue diferentes lightbox que admiten contenido HTML / iframed . Al revisar el proceso de pasos numerados de arriba, se mostrará cómo lograr el aspecto deseado para su sitio web.

Un paso clave sería configurar la caja de luz para usar toda la ventana gráfica, modificando las reglas CSS de la caja de luz si es necesario para evitar los gráficos y bordes de la piel del botón Cerrar.

El lightbox puede usar un único archivo de plantilla con un div que se llena con AJAX. Dicho div está centrado horizontalmente en la ventana gráfica sobre un fondo semitransparente. El propio iframe es transparente, lo que permitiría mostrar la página principal subyacente.

Agregue algunas reglas de desplazamiento similares a Pinterest y tendrá un método de clonación decente para usar.

En cuanto a la duplicación del diseño de la página web de Pinterest , vea esta respuesta SO .

Para usar el botón de Pinterest personalizado que es un enlace de texto , una miniatura o un combo de ambos , consulte esta respuesta SO .

Para el proceso Pinterest de Data Scrape con el tutorial jsFiddle, vea esta respuesta SO .