Модальное окно (lightbox) на CSS.

При открытии модального окна весь экран "гаснет" и на первый план выходит определённый элемент. Его создание не сложно.

Модальное окно с прокруткой

Для большого объёма контента, когда требуется прокрутка, скроллинг body, а не содержимого всплывающей записи вызывает неудобство.

Если в нём разместить небольшое содержание, например, форму обратной связи, форму регистрации, форму "заказать обратный звонок" или текстовое сообщение, то оно будет располагаться по центру.

Видео YouTube в модальном окне

Но возможно этот вариант всё же лучше?

Сделать, чтобы картинка была во весь экран при нажатии на неё

Если нужно только увеличение изображений при клике на них, то можно воспользоваться кодом ниже (не идеально: теги, выше элемента остаются активными):

Второй способ основан на этой технике. Эффекты http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

Tanka Последний код надо указывать в нужном месте сообщения? Вместо слова "Содержание" надо указывать свое слово или ссылку на картинку? Xstroy Спасибо. Очень понравилась данная реализация. Думаю попробовать применить в своих постах.Люблю использовать говорящие фото, а этим методом можно на порядок увеличить их эффект. NMitra Правильно.

"Содержание" может быть любое: текст, таблица, картинка (тег img), скрипт и т.д. Александр Здравствуйте, Наталья. Как бы Вы предложили модифицировать этот код (именно этот код, без создания новой вкладки или окна), чтобы по клике на картинке открывалось окошко со страничкой с другого сайта? Важно, чтобы подгружаемая страничка не грузилась до клика. NMitra По-поводу страницы другого сайта, на ум приходит только использование IFRAME, которое можно положить в DIV.

В этой реализации страница будет загружаться полностью, только её часть будет скрыта до клика. Нужно применить другой метод. Онлайн Спасибо. 1 вариант больше нравится кстати) NMitra Мне тоже) Анонимный 1 вариант однозначно лучше.

http://softodle.ru/ NMitra Посмотрела в Хроме, так второй выигрывает. Анонимный первый у меня в фаерфоесе ваще криво как то.второй нормалек! Владислав Все бы ничего, но есть один минус, использовать можно только 1 окно, а если к примеру я хочу использовать 10 модальных окон? NMitra Да, получается, что каждый раз нужно прописывать код с новым id. Вашковцы Средствами php легко.Большое спасибо, очень искал, негде не нашол такого хорошего решения. Кликну на рекламе. Анонимный Что именно нужно сделать чтоб прописать дольше изображений , чему именно менять id ?:) NMitra Я подумаю на недельке. Статью немного перепишу. Ориентируйтесь пока на этот пример http://www.cssplay.co.uk/menu/lightbox-hover.html

Варианты увеличения изображений http://shpargalkablog.ru/2011/05/kak-uvelichit-izobrazhenie.html и http://shpargalkablog.ru/2012/01/pri-navedenii-na-kartinku-ona.html Последний мне особо импонирует. Asaf Bakhshiyev Здрасте)Я вапще не разбераус в этом.открыл себе блог недавно.хотел б добавить модальное окно.Вопрос: Куда надо вставить эти тексты.Было б лучше если б вы более подробно написали об этом.Например вот текст и сюда вот вставте.Очень признателен за такие уроки).Блогодарю NMitra Смотря куда. Если единожды в тело сообщения, то посмотрите картинку отсюда http://shpargalkablog.ru/2012/04/script-parolya-na-stranitsy.html , потренируйтесь, посмотрите вариант, который наиболее подходит.

Если многократно хотите применять (во многих сообщениях), то стили CSS лучше убрать в шаблон http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html . Но только после того, как потренируетесь на сообщении.

Стили CSS - это код между

А именно только "содержание" без тега style ( http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html ) Анонимный 00 Анонимный SЗамечательный код, спасибо большое.

Единственная загвоздка с вариантом видео, закрываешь окошко с видео, а оно продолжает дальше работать фоном, пока в ютубе его не остановишь.Есть ли здесь решение?

Olesya NMitra Олеся, это CSS, только внешнее оформление. Вам нужно посмотреть альтернативные варианты на JavaScript или PHP. Анонимный Здравствуйте. Нужна ваше помощь=)

Мне нужно что бы в модельном окне отображалась html страница: почему когда я у iframe прописываю адрес этой страницы то: в "Opera" у меня всё отображается отлично, а в "Chrome" всё модельное окно оказывается под слоем a[href="#close"], то есть всё окно затемнено, скроллинг недоступен потому что везде активна ссылка #close.

Подскажите пожалуйста чайнику)) это дело можно как-то поправить? Анонимный Отбой.)) Ложная тревога =) Проблема решена следующим образом: в классе lightbox удалил параметр position: fixed; Анонимный Да. сложно быть чайником)) Но уже у всём разобрался. Спасибо за ваш отличный ресурс! NMitra Вовсе нет, вы задали очень нужный вопрос. Когда я писала статью, не проверяла в Хроме, а он подкидывает сюрпризом не меньше IE. Попозжей посмотрю. kjhmnbm, Доброго времени суток! Вопрос такой, глюк возникает в IE 10 что первый раз когда кликаешь на картинку все ок, а вот когда второй раз ее вызываешь то блок не загружается. Куда нужно копать? NMitra Хороший вопрос. Предполагаю в сторону процентов. Будет время, перепишу статью на следующей недели NMitra kjhmnbm,, если срочно нужно, посмотрите тут http://shpargalkablog.ru/2013/08/bell-site.html Очень здорово получилось, позже отредактирую статью. Богдан Дорин Подскажите пожалуйста что именно нужно прописать что бы блок растягивался под содержимое,а то чёт туплю и не как не получается,спасибо NMitra Что там у вас получилось? Покажите ссылку. Анонимный Народ! В хроме первый пример перекрывается темным фоном, т.е. ссылкой на закрытие. Поэтому дальнейшая работа с открытым окном не представляется возможной. NMitra Никак не перепишу статью. Ловите код. Думаю, вы сможете его довести до ума:

<style>.lightbox .lightbox:target .lightbox div a[href="#close"] </style>

<a href="#showimage1" /><div /><a href="#close">?</a><div>      <img src="àäðåñ_èçî"/>      Òåêñò</div></div> Sandro Здравствуйте! Я правильно понимаю, что во всех приведенных случаях нужно загружать 2 фото-большое и превью? Мне надо чтоб увеличивалось одно имеющееся. NMitra Здравствуйте, учту ваши слова. Пока сделала упрощённый вариант, см. начало статьи. Vladimir Knyazev Очень понравилось окно, все работает прекрасно. Только серый повлиял на цвет ссылок в меню. Подскажите как исправить и что? Сайт http://never-vladimir.narod.ru/index/moj_teatr/0-6 Vladimir Knyazev /* Site Menus */.uMenuH li

/* Entry Manage Table */.manTable .manTdError .manTd1 .manTd2 .manTd3 .manTdSep .manHr .manTdBrief .manTdText .manTdFiles .manFlFile .manTdBut .manFlSbm .manFlRst .manFlCnt /* ------------------ */ Vladimir Knyazev Вынесла стили из цсс на саму страницу и все восстановилось. как только вношу в общие - все сначала(( Наверное, придется оставить на станице(( NMitra Ничего не поняла.

Объясните так: есть то-то, когда нажимаю на то-то, то должно происходить то-то, а происходит то-то.

Например, ссылки в блоке "Меню сайта" оранжевого цвета, нажимаю на фото человека, фото человека увеличивается, появляется затемняющий фон, а цвет ссылки становится белым. А я хочу зелёным. Vladimir Knyazev Были: ссылки в меню черного цвета. Вставила стиль от модального окна в общую таблицу стилей - и цвет ссылок в меню стал rgba(210,210,210,.4)Удаляю из цсс и вставляю прямо на страницу - ссылки опять становятся как и должно черными. Пытаюсь найти логическую связь - и не могу.Сейчас оставила стиль на странице. NMitra Уберите

border: solid rgba(210,210,210,.4); border-width: 100vh 100vw;

из кода модального окна NMitra или box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(210,210,210,.4); из первого варианта Vladimir Knyazev Спасибо сейчас буду пробовать. Столько всего интересного и главное в доступной форме у вас в блоге! Многие люди умеют делать разные сложные вещи, но не все могут научить этому других. Спасибо еще раз. NMitra Благодарю, очень приятно слышать! Анонимный Кто подскажет. В первом варианте вывода изображения при открытии в окне почему то весь фон затемняется кроме полоски меню. И получается что увеличенная картинка находится под полоской меню. NMitra Нужно увеличить значение z-index: 10; Макс Классный примерчик! У меня проблемка в overflow: hidden -> overflow:visible. У меня слайдер из картинок в классе с overflow: hidden. Хочу чтобы при клике на картинку работал ваш zoom-images, переключая overflow на visible, иначе пока зум зумится внутри слайдера и ничего не видно. Возможно ли это? Спасибо! NMitra Честно говоря слабо понимаю что там у вас. Вот вариант, как может он работать http://shpargalkablog.ru/2014/02/gallery.html Макс прикрепил html с контентом вам в личку на почту! =) Анонимный #31 класс код) без всяких библиотек, гуглескриптов))) NMitra :)) dumptyhumpty Спасибо за интересные практические примеры. Сделал на основе вашей галереи удобный сниппет для вордпресс. Если интересно, могу выдать исходники и инструкцию для применения - напишите статью )))Использовал один из вышеописанных вариантов для работы увеличения на весь экран картинок.Но есть один момент. Всякие pagespeed и другие анализаторы скорости загрузки, ругаются на то, что размер картинки изначально большой и его нужно подстраивать.Можно набросать вариант (пусть хотя бы теоретический, сам поэкспериментирую и доведу до ума) такой, чтобы Было примерно так: ссылка на качественную картинку /а>при щелчке на картинку она увеличивалась до экрана (ссылка из тэга берется). При щелчке по большой фотке обратно. Цель: большие картинки индексируются поисковиками, но не загружаются при открытии страницы.Ну и как дополнение, вариант, чтобы картинки не индексировались, т.е. чтоб не src, а к примеру rel использовался? Сделаю на основе этого сниппет, опять же, напишите статью )В идеале, маленькая картинка - превью и "галерея", хоть из одной фотки, хоть из многих, чтобы грузилась только одна превьюшка, а остальные подгружались по необходимости.Хотя бы намек, куда копать. Через after реализовать? или как проще? dumptyhumpty Выше я имел в виду, что сделал из галереи шорткоды для вордпресс, чтоб не набирать код каждый раз в ручную. Для увеличения картинки (в одну или в галерею) так же могу сделать, так что объем кода не пугает. NMitra По URL.

http://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s400/mishki.jpg - миниатюраhttp://2.bp.blogspot.com/-NEvSypEsQv0/TZQ1tka_UwI/AAAAAAAABqo/qjYR-YSjjws/s00/mishki.jpg - полный размер

Стилями задавать позиционирование, JavaScript-ом менять кусок URL при click на картинку. Ссылки не нужны. NMitra Хм, при фокусе на картинку, а не click. dumptyhumpty Т.е. без JS в таких случаях никак?То, что в это статье (лебеди и мишки) у меня по клику работает. Т.е. оставляем стили такими для изменения размера, а еще добавляем скрипт, который при фокусе меняет урл картинки. Где "хранить" урлы тогда?А нельзя "соединить" вариант с img[tabindex="0"] и что-то из вашего же http://shpargalkablog.ru/2012/01/pri-navedenii-na-kartinku-ona.html? dumptyhumpty А код в статье совсем недавно менялся? а то у меня с использованием класса zoom-image. Идея с "При фокусе меняем урл", "при клике размер во весь экран" очень нравится.будет ли работать что-то вроде того, если в выше описанный код с tabindex="0" вставить что-то вродеi mg[tabindex="0"]:hover http://shpargalkablog.ru/2012/02/before-after-css.html (Хм, неплохая идея, но нужна ещё одна обёртка).

Комментарий 57: http://dev.opera.com/articles/responsive-images/ (Это для индексации) dumptyhumpty Сделал через маленький скриптик, за основу взял, который ваш и я упомянул в 57 комменте.Я вешаю скрипт на onfocus и сравниваю только один раз, т.е. если урл у меня не сходится с переданным, то я подставляю переданный.На onClick не работало вместе с CSS. Теперь могу ставить маленькие изображения, а при наведении и потом клике подменяется урл и дальше увеличивается/уменьшается уже оригинал :)Спасибо за подсказки. Лайкнул в фейсбуке. NMitra См. скрипт http://jsfiddle.net/NMitra/jwnsj5fq/ С помощью регулярных выражений можно вычислять /s150/ и /s300/ и /s400/. Поскольку большая картинка уже загружена, то смысла делать onblur нет. Достаточно прописать атрибут width и/или height. dumptyhumpty Случайно не в курсе, почему-то на айфоне верхний вариант, где табиндекс=0, отрабатывает на увеличение картинки, а вот обратно не отрабатывает. То ли я не так под себя подогнал, то ли просто

*