Чат сообщества
|
   |
| Модератор форума: JonMagon |
| Сообщество uCoz Вебмастеру JavaScript, Flash и прочие технологии Модальные окна с уникальным адресом как в ВК (js) |
| Модальные окна с уникальным адресом как в ВК |
|
Всем привет.
Ребятки, подскажите, кто знает как сделать модальные окна по типа как в вконтакте. Ну или это не модальные окна, к сожаленияю даже названия не знаю, так, что погуглить не могу. Пример: когда в ВК нажимаешь на какую нибудь картинку, она открывается как бы во всплывающем окне по верх всего сайта + в адресную строку добавляется адрес непосредственно на эту картинку + убераеться вертикальная прокрутка сайта и (при нужде) появляется вертикальная прокрутка именно этого окна. И если скопировать ссылку с адресной строки, и вставить её в новую вкладку, то у нас загрузится сайт + по верх это модальное окно. В общем подскажите как это реализовать, или хотя бы как эта техника называется, что бы мог погуглить. Ну и для примера скрин, если кто не понял что нужно. ДО КЛИКА  ПОСЛЕ КЛИКА  Я просто хочу применить эту технологию для показа в таком окне страницу материала и комментариев к нему через фрейм или get. Прикрепления:
5066965.jpg
(456.6 Kb)
·
9008746.jpg
(363.5 Kb)
   Сообщение отредактировал Rad_van_Cor - Вторник, 21 Май 2013, 10:11:39
|
|
Rad_van_Cor, можно через GET URL параметры сделать http://mywebdev.jimdo.com/2009....как-хэш
PS Как в VK не получится, если только брать старую реализацию, но она основана на использовании hash и History API: http://habrahabr.ru/sandbox/39218/ http://habrahabr.ru/post/144071/ http://web.izjum.com/url-changing-without-page-reloading Сейчас же VK использует контейнеры и node.js, т.ч. там сам черт ногу сломит( Сообщение отредактировал Drinko - Четверг, 23 Май 2013, 10:26:47
|
|
Я не так много работаю с jquery, но сам решил бы эту задачу таким образом:
Изменять url при открытии окна с помощью history.replaceState, далее проверять переход по url (например /?win=4) с помощью location.search. Примерный код такой: Код <script> var url = window.location.search.split('?')[1]; if (url == 'win=4') { new _uWnd('win4','test',100,100,{autosize:1},'Получено'); }; </script> А так, я Вам просто идею подкинул, далее доработайте скрипт сами, но Ваша задача вполне решаема, в системе ucoz. Сообщение отредактировал Мaксим - Пятница, 24 Май 2013, 18:47:29
|
|
Вообще, идея использовать history, pushState и т.п. вполне разумна.
Есть только один нюанс - пользователи со старыми браузерами. В скрипте нужно делать проверку, и для таких пользователей выводить обычные ajax-окна. В общем у них будут некоторые трудности с использованием таких вещей. Обычно делается как: для современных браузеров обработчик click производит замену адреса и загрузку данных, а для пользователей со старыми браузерами, либо отключенными скриптами происходит простой переход по ссылке. Если планируется использовать свои страницы (откуда будет подгружаться информация в ajax-окна), то всё ещё не так плохо. А стандартные окошки подгружают информацию со страниц вида /index/9-162866 поэтому просто так перенаправлять туда пользователя нежелательно. Думаю реализовать это так, чтобы всё у всех работало одинаково хорошо можно, но довольно сложно. Absit invidia verbo
|
|
Вансан, использовать это буду так:
Заходит к примеру человек в на страницу /news Видит там ряд новостей с кратким описанием. Если он кликнит по новости, попадёт на страницу этой новости /news/2013-05-03-$ID$ и там увидит полную новость. А я хочу сделать так, что бы при клике на новость, открывалось такое окно, в котором будет полная новость, что бы она или гетом бралась ну или просто в это окно фрейм вставлять. И ссылка в адресной строки менялась с /news на /news?2013-05-03-$ID$ (ну или что-то в этом роде) А для далёких, которые юзают IE6 или браузер с отключенным JS вместо сайта выводить окно с сообщением, что мол для работы сайта нужно скачать нормальный браузер и включить поддержку JS Вот что показывает ВК если отключить JS и обновить страницу  Прикрепления:
0320840.jpg
(147.3 Kb)
|
|
Rad_van_Cor, если для новостей то можно всё сделать довольно просто.
Каждая ссылка будет иметь вид: Код <a href="/news/2013-05-03-$ID$" onclick="return handle_func($ID$)">$TITLE$</a> handle_func должна возвращать 0 - если загрузка данных прошла успешно и pushState поддерживается, иначе 1. Таким образом те, кто используют старые браузеры, или те, у кого отключен JS будут просто переходить по ссылке как и всегда. Absit invidia verbo
|
| |||
| |||