Ответ 1
Это моя оценка того, как Pinterest достигает уникального модального вида и того, как его дублировать.
В первую очередь обработка URL-ссылок проанализирована на стороне сервера, чтобы узнать, происходит ли ссылка с самого сайта Pinterest. При этом динамическая структура Адресная строка URL-адресов браузера и История динамически создается и не выполняется посетителем.
Чтобы уточнить: Адресная строка не является фактическим местом, где вы находитесь, когда происходит опыт модели! Чтобы доказать это, нажмите объект Pinterest, и когда в режиме мода перейти в адресную строку и в конце этого URL-адреса разместите свой курсор мыши strong → нажмите. Затем вы перенаправляете на это местоположение! Для дополнительной проверки, что вы никогда не покидали домашнюю страницу, просмотрите вкладку "Сеть" в Firebug/Firefox или вкладке "Сеть" в Chrome.
Следующий метод - это то, что делает Pinterest при посещении домашней страницы. Пожалуйста, смотрите осторожно:
- Показать домашнюю страницу.
- Подождите, пока посетитель нажмет на объект Pinterest.
- Объект с кликом имеет уникальную веб-страницу для прямого доступа.
- Объект с кликом не выполняется.
- Панель браузера будет заполнена этим местоположением щелкнутых объектов, но на самом деле это не так.
- История браузера получит щелкнув местоположение через обработку JavaScrict или Server-side.
- AJAX загрузит кусок данных (мясо модального через ID) с объектной страницы. Подтверждаем через HTTPRequest.
- Объект с щелчком на главной странице исчез (это можно проверить с помощью элемента Inspect).
- Процесс AJAX поместит эту часть данных в центр экрана с белым наложением.
- Прокрутка главной страницы отключена, а "модальные" данные AJAX получают события прокрутки через
#zoomScroll. - При нажатии модального фона возвращается объект на веб-страницу, а адресная строка URL-адреса "визуально" возвращается.
Чтобы воссоздать эффект модели Pinterest, я бы исследовал различные лайтбокс , поддерживающие HTML/iframed. Просмотр пронумерованных шагов выше процесса покажет, как добиться желаемого поиска вашего сайта.
Ключевым шагом было бы установить лайтбокс для использования всего окна просмотра, изменяя правила CSS для лайтбокса, если это необходимо, чтобы избежать любой скрытой графики и границ закрытой кнопки.
Затем лайтбокс может использовать файл с одним шаблоном с div, который заполняется AJAX. Указанный div горизонтально центрируется в окне просмотра на полупрозрачном фоне. Сам iframe является прозрачным, что позволяет показывать основную домашнюю страницу.
Введите несколько правил прокрутки, похожих на Pinterest, и у вас есть приличный метод клонирования.
Что касается дублирования Макет страницы Pinterest, см. этот SO-ответ.
Чтобы использовать пользовательскую кнопку Pinterest, содержащую текстовую ссылку, миниатюру или комбо, см. это SO ответ.
Для процесса Сброс данных Pinterest с помощью учебника jsFiddle см. этот SO-ответ.