C'est mon évaluation de la façon dont Pinterest réalise qu'il est unique modal chercher et comment le reproduire.
D'abord et avant tout, un Lien URL de la manipulation est côté serveur analysées pour voir si le lien est originaire de l'Pinterest site lui-même. Cela dit, les Navigateurs Barre d'Adresse URL et l'Histoire sont créées dynamiquement et pas réellement effectuées par le visiteur.
Pour clarifier: La barre d'adresse n'est pas l'endroit de votre à quand un modèle de l'expérience est en train de prendre place! Pour prouver cela, cliquez sur Pinterest objet et quand en modal vue aller à la Barre d'Adresse et à la fin de l'URL de l'emplacement placez votre curseur de la souris , puis cliquez sur entrée. Vous serez alors rediriger vous-même à cet endroit! Pour une vérification supplémentaire que vous n'avez jamais quitté la page d'accueil, afficher l' Onglet réseau de Firebug/Firefox ou Réseau de l'Onglet dans google Chrome.
La méthode suivante est ce que Pinterest est en train de faire lors de la visite de la page d'accueil. S'il vous plaît consulter avec précaution:
- Afficher La Page D'Accueil.
- D'attente pour les visiteurs à cliquer sur Pinterest objet.
- L'objet cliqué a une unique page web pour un accès direct.
- L'objet cliqué n'est pas suivie.
- La barre du navigateur remplira lui-même avec cette cliqué objets emplacement, mais vous n'êtes pas à la réalité.
- L'historique du navigateur recevrez cliqué sur l'endroit par l'intermédiaire JavaScrict ou de traitement Côté Serveur.
- AJAX va charger un morceau de données (de la viande de modal par ID) de l'objet de la page. Vérifiable via HTTPRequest.
- L'objet cliqué sur la page principale a disparu (Ce qui peut être contrôlée à l'aide d'Inspecter l'Élément).
- L'AJAX processus de placer ce morceau de données dans le centre de l'écran avec une superposition de couleur blanche.
- Le défilement de la page principale est désactivée lors de l'AJAX "modal" de données reçoit des événements de défilement via
#zoomScroll.
- En cliquant modal de fond renvoie l'objet de la page web et l'URL de la Barre d'Adresse est "visuellement" est revenue.
Pour recréer l'effet de modèle Pinterest utilise, je voudrais étudier les différents lightbox est que le support de HTML/iframed de contenu. Revoir les étapes numérotées processus ci-dessus va vous montrer comment obtenir le look désiré pour votre site web.
Une étape clé serait de définir la lightbox pour utiliser la totalité de la fenêtre d'affichage, la modification de la lightbox CSS règles, si nécessaire, pour éviter tout Bouton de fermeture de la peau des graphiques et des frontières.
La visionneuse peut alors utiliser un seul fichier de modèle avec un div c'est peuplée par AJAX. Dit - div est centrée horizontalement dans la fenêtre d'affichage sur un fond semi-transparent. L'iframe lui-même est transparent, ce qui permettrait à la sous-jacentes de la page d'accueil de montrer à travers.
Jeter un peu de défilement des règles similaires à Pinterest et que vous avez un décent clone de la méthode à utiliser.
Aussi loin que dupliquer le Pinterest de la Page web Mise en page, voir cette SORTE de Réponse.
Pour utiliser les Bouton Pinterest qui est du texte-lien, vignette, ou un mixte des deux, voir cette SORTE de Réponse.
Pour les Données de Gratter Pinterest processus avec jsFiddle tutoriel, voir cette SORTE de Réponse.
