Лучшим примером явлется вк https://vk.com/team ну и в качестве дополнительного примера могу привести такую галерею https://dota2.ru/gallery/
В каждом из этих примеров при клике на картинку открывается модальное окно с изменением адресной строки и содержащее дополнительные блоки, помимо самого изображения.
Но чего я на текущий момент я не знаю, так это способа реаллизации этих требований даже в самых общих чертах. Устанавливал парочку относительно подходящих плагинов, но на этом всё и закончилось. Куда, как и в какую сторону нужно посмотреть, что бы приблизиться к реализации моих требований?
Отслеживать
задан 20 июл 2017 в 15:56
Эдуард Ледовой Эдуард Ледовой
19 8 8 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Я бы использовал Twitter Bootstrap для реализация подобного запроса.
Просто используйте GET запросы при вызове модального окна, т.е. где фотография является ссылкой с get-параметром.
Почитать про $_GET можно тут.
Простое модальное окно (Popup окно)
Почитать про модальные окна в Twitter Bootstrap можно тут.
Отслеживать
ответ дан 20 июл 2017 в 18:13
1,256 7 7 серебряных знаков 18 18 бронзовых знаков
С гет запросами разобраться не трудно, а вот что касается бутстрапа . . . что-то у меня такое ощущение, что на jQuery будет легче создать такой просмотр, хоть мне это не по зубам =) не говоря уже о том, что ещё и сам фрейворк нужно изучать
20 июл 2017 в 21:13
Не совсем так. Без Bootstrap сейчас никуда, в любом случае стоит изучить(хотя бы grid — без нее уж точно никуда). Не обязательно учить все, я же конкретно скинул ссылку на модальные окна, большего тебе и не нужно
Источник: ru.stackoverflow.com
Создание модальных окон
Сейчас будем реализовать простую модальную окну как у социальных сетей ВКонтакте, Facebook, Twitter, используя известный плангин — jQuery.
Возможности окна
— Закрытие с помощью клавиши ESC.
— Можно закрыть кликнув в тень окна.
— Синхронность, когда загрузите данные через Ajax, закроете и откроете заново, то загружать и жрать лишний трафик не будет до обновления страницы, т.к при закрытии загруженные данные (формы, тексты, изображении и т.д) не удаляются, а просто скрываются.
HTML код
Окна Тут разные блоки сайта. 1 — ID окна, где width — стиль окна. Открыть окно
Где 1 — ID окна, где width — стиль окна (ширина, можно указать любую CSS код).
jQuery код
function win(id,style) var cl = $(‘body’).find(‘.closewindows’); if(!cl[0]) ‘).prependTo(‘body’);> var wi = $(‘body’).find(‘#windows’+id);if(wi[0]) if(!wi[0])<$(‘Загрузка. ‘).prependTo(‘body’); var width = $(‘.windows’).innerWidth() / 2; var width = $(window).innerWidth() / 2 — width;$(‘.windows’).css();$.ajax(body .closewindows .windows
Результат
Модальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать?
Надеюсь мой мини-код поможет новичкам.
Источник: habr.com
Курсы javascript
Нужно чтобы во всплывающем модальном окне отображалась группа подписчиков вконтакте, чтобы модальное окно всплывало самостоятельно раз в сутки при заходе на сайт для зарегистрированных и для гостей первый раз зашедших на сайт. Может кто-нибуть уже сталкивался с подобной задачей.
На скрине то что мне нужно:
Сам я пробовал значит в модальное окно fancybox вставлял сгенерированный код виджета группы вконтакте, во всплывающем окне почему-то содержимое виджета не отображается, может из-за того что содержимое модального окна при срабатывании подгружается аяксом и сам виджет подгружается аяксом, получается двойной аякс и при всплытии модального окна отображается только серый фон, короче у меня ничего не получилось
24.07.2013, 13:34
что-то знаю
Регистрация: 24.05.2009
Источник: javascript.ru