Как сделать модальное окно css

Всплывающее окно на HTML и CSS

Для вывода важных сообщений или просто изменений, произведённых на сайте, можно использовать всплывающие окна. Всплывающие окна бывают двух видов: обычные и модальные.

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

Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert().

Всплывающее окно

Первым шагом создания всплывающего окна является создание элемента <div> (или любого другого элемента) и его оформление:

Этот <div> и будет использоваться в качестве всплывающего окна. Теперь мы его скрываем с помощью значения none свойства display и добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:

Используя псевдо-класс :target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента <div> сменится с none на block .

Теперь надо расположить <div> посередине страницы, чтобы он стал похож на всплывающее окно. Делаем его абсолютно позиционированным и центрируем его по вертикали и горизонтали:

Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент <div> внутри элемента <a>:

Затем мы позиционируем элемент <a> и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем нашу ссылку на него:

У элемента <div> убираем display: none; (он больше не нужен, так как скрываем мы теперь <a> ). В итоге родительский <a> выполняет теперь скрытие всплывающего окна, перенаправляя выбор на страницу.

На этом создание простого всплывающего окна закончено.

Модальное окно

Для создания всплывающего модального окна, берём элемент <div> , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:

Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему <div> и оформив:

Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный <div> :

Позиционируем родительский <div> и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.

У дочернего <div> убираем display: none; (он больше не нужен, так как родительский <div> будет скрывать всё, что находится внутри него). В итоге родительский <div> теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:

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

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

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

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

Простое модальное окно с затемнением

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

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

переправа

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

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

семья медведейлебедь

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

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

68 комментариев:

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 <
&#160;&#160;display: none;
&#160;&#160;height: 100%; width: 100%;
&#160;&#160;position: fixed; top: 0%; left: 0%;
>
.lightbox:target <
&#160;&#160;display: block;
>
.lightbox div <
&#160;&#160;display: block;
&#160;&#160;position: absolute; top: 50%; left: 50%; z-index: 1;
&#160;&#160;transform: translate(-50%, -50%);
&#160;&#160;border: 1px solid red;
&#160;&#160;background: #fff;
>
a[href="#close"] <
&#160;&#160;position: fixed; top: 0; bottom: 0; right: 0; left: 0;
&#160;&#160;background: rgba(0, 0, 0, .6);
>
</style>

<a href="#showimage1" /><div /><a href="#close">?</a>
<div>
&#160;&#160;&#160;&#160;&#160; <img src="àäðåñ_èçî"/>
&#160;&#160;&#160;&#160;&#160;&#160;Òåêñò
</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
cursor: zoom-in; вставить src=урл миниатюры
> dumptyhumpty Хотя и правда , проще обрамлять картинку ссылкой на js скрипт, который меняет туда-сюда урлы.
Эх и тяжко у вас тут 🙂 и профиль выбирать и потом еще капчу заполнять 🙂 dumptyhumpty Вот здесь, как я понимаю изначально задумывалось передавать урлы в функцию!?
"s cript>function miniatuyra3(cual,url) else > s cript>

i mg on click="miniatuyra3(this);" s rc="уменьшенная_картинка"/>"
Почему отказались? в миниатюру3 передается объект картинка и вторым параметром урл? т.е. можно же сделать универсальную функцию по типу miniatuyra3(cual, url1, url2) хотя в этом случае не снимается вопрос индексации большой картинки, но это можно решить как-то по другому )))
NMitra Спама много шибко.

Комментарий 55: только для
1) background-image http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html#image
2) :before < content: url(адрес); >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, отрабатывает на увеличение картинки, а вот обратно не отрабатывает. То ли я не так под себя подогнал, то ли просто

* <
pointer-events: none; не отрабатывает почему-то. NMitra http://caniuse.com/#feat=pointer-events Хотя некоторые свойства имеют различие в поддержке на разных устройствах. NMitra Зачем на айфоне картинки увеличивать? По хорошему на телефоне нужно избавляться от бокового меню, а картинки в ряд прописать. Ralina У меня такая проблема. Картинка увеличивается, фон затемняется, но сайт за картинкой остается активным, т.е. я могу нажать на другую картинку сквозь увеличенную. Что с этим делать? NMitra Да, есть такая проблема, родительский селектор пока не принят браузерами. Поэтому нужно сделать div на том же уровне, что и картинки, как тут http://shpargalkablog.ru/2014/02/gallery.html Ralina Не могли бы вы объяснить поподробнее, если не сложно? Просто я почти ноль в этом. Дело в том, что я делаю не галерею (так то она идеально работает), а увеличение картинок в постах блога по нажатию. Т.к. знаю я мало, бьюсь над этим уже долго. Я использовала ваш код, и он слава богу работает (спасибо вам за это огромное), но этот ньанс всё портит. Чтобы это исправить, я создала див для"подкладки" и поместила его в. в то что моделирует посты с фото. 😀 но он не исчезает, а постоянно находится на странице, и блокирует вообще всё. Яяя уже не знаю что делать, ума не хватает, гугл не помогает

код подложки .black<
color:#000000;
position:fixed;
height:100%;
width:100%;
z-index:15000;
>

Модальное окно на CSS + JS

Модальное окно на CSS + JS

Каждый начинающий веб-разработчик рано или поздно сталкивается с задачей, реализовать на сайте модальное окно (аналог pop-up окна).

Модальное окно полностью блокирует работу родительского сайта, пока пользователь не закроет данное окно. Как вы понимаете, что для навязывания такого действия, содержимое модального окна, должно представлять пользу для пользователя.

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

Демонстрация модального окна.

Мы сделаем адаптивное модальное окно без плагинов и библиотек, на чистом CSS+JS.

HTML разметка

Создадим кнопку, при клике на которую, будет открываться модальное окно.

<button >Открыть окно</button>

Оболочка окна с затемнением, внутри которого, будет окно поменьше с содержимым. Затемнение самого сайта, подсказывает пользователю, что сначала следует заняться окном.

Содержимое модального окна, состоящее из хедера, тела и футера.

CSS код

Оформление полноэкранного фона модального окна.

.modal <
display: none; /* Скрыто по умолчанию */
background-color: rgb(0,0,0); /* Затемнение фона */
background-color: rgba(0,0,0,0.5); /* Полупрозрачное затемнение */
z-index: 1; /* Фон на нижнем слое */
overflow: auto; /* При необходимости, то появиться прокрутка */
>

Модальное окно с содержанием, к которому примениться анимация.

.modal-content <
animation-name: animate;
animation-duration: 0.5s
>

Добавим анимации для плавного скольжения сверху вниз и постепенного появления модального окна.

Стилизуем крестик (сущность ×), при клике по которому, модальное окно закроется.

.close <
font-size: 30px;
font-weight: bold;
>

JS код

Без JavaScript, не будет открываться и закрываться модальное окно. Получаем все нужные элементы, участвующие в процессе.

Получить модальное окно по ID.

var modal = document.getElementById(&#039;myModal&#039;);

Получить кнопку, которая открывает модальное окно по ID.

var btn = document.getElementById("myBtn");

Получить тег span с классом close, который закрывает модальное окно.

var span = document.getElementsByClassName("close")[0];

Функции открыть / закрыть при клике.

Когда пользователь кликает по кнопке, модальное окно открывается – переходит из скрытного состояния в видимое.

btn.onclick = function() <
modal.style.display = "block";
>

Когда пользователь кликает на крестик в теге span, модальное окно закрывается, наоборот переходит из видимого состояния в скрытное.

span.onclick = function() <
modal.style.display = "none";
>

Когда пользователь кликает где-то за пределами модального окна, оно закрывается, становиться невидимым.

window.onclick = function(event) <
if (event.target == modal) <
modal.style.display = "none";
>
>

Свободное владение языком JavaScript, делает создание web-страниц – не скучным процессом, вы можете сами в этом убедиться, посмотрев мой видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру".

На CodePen вы можете увидеть весь код модального окна на CSS+JS, который можно скачать и использовать в своих проекта.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *