Модальное окно html css. Создаем модальное окно на HTML5 и CSS3
Диалоговое окно — это отличный способ вывести короткое сообщение или информацию. В настоящее время модальное окно является очень популярным элементом веб-дизайна. Если вы добавляете на страницу какой-то особенный контент, то лучше поместить его в модальное окно:
Раньше оно создавалось с помощью JavaScript , что на данный момент не считается оптимальной практикой. Но HTML5 и CSS3 позволяют без проблем создавать модальные окна. В этом руководстве мы будем использовать CSS3-переходы , непрозрачность, pointer-event и цвет фона.
Это модальное окно будет разработано на чистом CSS . Оно будет адаптивным и должно нормально работать на смартфонах и планшетах. А также на больших экранах с высоким разрешением.
Создание CSS модального окна
Первым делом нам нужно создать простой HTML-код :
У нас есть простая ссылка, которая предлагает открыть модальное окно и хэштег modal-one . Мы будем задавать все стили прямо здесь с помощью классов, поэтому идентификатор используется как хук для создания модального поля.
Помните, что мы будем использовать только CSS , а не модальное окно JQuery , поэтому применим псевдо-селектор “:before target ”.
Далее нужно сохранить все содержимое модального окна. Внутри div мы поместим гиперссылку. Она закрывает контейнер, который мы выводим с помощью CSS . Затем можно поместить заголовок с несколькими пунктами текста под ним. Наша HTML-разметка теперь будет выглядеть следующим образом:
Задаем стили
Сейчас мы имеем гиперссылку, обернутую в div . Можно приступить к назначению стилей для контейнера, чтобы сделать его более практичным. Сначала создадим класс modal для модального окна на CSS . Для него мы используем псевдоэлемент :before :
Modal:before { content: ""; display: none; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } .modal:target:before { display: block; }
Мы создаем модальное окно , задав для него фиксированную позицию. Оно будет смещаться вниз, когда пользователь прокручивает страницу.
Дополнительно мы устанавливаем для верхнего, правого, нижнего и левого края значение ноль, чтобы затемненный фон охватывал весь экран. Теперь нужно задать фон, рамку, радиус для .modal-dialog , а также фиксированную позицию. Наш CSS код будет выглядеть следующим образом:
Modal-dialog { background: #fefefe; border: #333 solid 1px; border-radius: 5px; margin-left: -200px; position: fixed; left: 50%; top: -100%; z-index: 11; width: 360px; -webkit-transform: translate(0, -500%); -ms-transform: translate(0, -500%); transform: translate(0, -500%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; }
Modal:target .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); top: 20%; }
Вот еще несколько стилей, которые нужно использовать, чтобы модальное окно выглядело красиво:
body { color: #333; font-family: "Helvetica", arial; height: 80em; } .wrap { padding: 40px; text-align: center; } hr { clear: both; margin-top: 40px; margin-bottom: 40px; border: 0; border-top: 1px solid #aaa; } h1 { font-size: 30px; margin-bottom: 40px; } p { margin-bottom: 20px; } .modal-body { padding: 20px; } .modal-header, .modal-footer { padding: 10px 20px; } .modal-header { border-bottom: #eee solid 1px; } .modal-header h2 { font-size: 20px; } .modal-footer { border-top: #eee solid 1px; text-align: right; }
Теперь, когда мы задали стили модального окна HTML и сделали его функциональным, нам осталось создать кнопку справа снизу. Код CSS :
Btn { background: #428bca; border: #357ebd solid 1px; border-radius: 3px; color: #fff; display: inline-block; font-size: 14px; padding: 8px 15px; text-decoration: none; text-align: center; min-width: 60px; position: relative; transition: color .1s ease; /* top: 40em;*/ } .btn:hover { background: #357ebd; } .btn.btn-big { font-size: 18px; padding: 15px 20px; min-width: 100px; } .btn-close { color: #aaa; font-size: 30px; text-decoration: none; position: absolute; right: 5px; top: 0; } .btn-close:hover { color: #919191; } /*добавляем, чтобы остановить прокручивание вверх*/ #close { display: none; }
В чем преимущества созданного модального окна?
Главным преимуществом нашего модального окна является то, что оно создано с использованием только HTML5 и CSS3 . Почему это так важно? Модальное окно Javascript — это то, что может создать даже новичок. Существует масса готовых решений, которые можно скачать в интернете. Так почему мы хотим обойтись исключительно HTML5 и CSS3 без JavaScript ?
Ну, например, чтобы пользователи без поддержки JavaScript могли использовать модальное окно. Статистика говорит о том, что более 2% пользователей по всему миру не используют JavaScript .
Мы эффективно использовали несколько строк кода CSS для создания анимации. Если применить любую JavaScript-библиотеку анимации, то будете ошеломлены тем, насколько меньше кода мы использовали. Это дает еще одно преимущество — более чистый код.
Мы реализовали div , который содержит всю анимацию, и он состоит всего из нескольких строк кода. Что делает код более чистым, и это решение позволяет изменить или переместить этот div по своему усмотрению, не беспокоясь об изменениях кода в JavaScript .
И, наконец, за HTML5 и CSS3 будущее. Все мы стараемся использовать их в своих проектах. Благодаря им вы получаете более чистый код, не нужно беспокоиться о библиотеках JavaScript . HTML5 и CSS3 с нами надолго, так что нет причин не использовать их.
Заключение
Теперь вы можете создать с помощью HTML5 и CSS3 простое модальное окно , которое можно использовать для формы входа или регистрации, рекламных блоков и многого другого. Кроме этого вы узнали, почему стоит использовать HTML5 и CSS3 вместо JavaScript , и увидели несколько примеров того, как сайты используют модальные окна.
Перевод статьи «How To Make a CSS Modal Window without Javascript » был подготовлен дружной командой проекта .
Всем привет! В этом небольшом уроке мы создадим простое, но мощное по возможностям модальное окно на чистом CSS. И заодно повторим (а для кого и откроем) такую полезную вещь как flexbox. При этом мы будем создавать не просто модальное окно, которое открывается по клику, а которое позиционируется точно по центру экрана. Когда-то давно такое можно было проделать только с помощью javascript, но время идёт и теперь такое можно сделать с помощью буквально 4 строчек кода.
Открыть модальное окно
Контент внутри окна
Всё это модальное окно состоит как бы из двух слоёв — первый слой, который имеет класс ModalWindow , затемняет всё пространство вокруг модального окна и будет выравнивать содержание окна по центру экрана. Второй слой — класса Modal_Body — содержит непосредственно сам контент модального окна.
Теперь создадим CSS-код для этой разметки:
Modal { position: fixed; display: none; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: rgba(0,0,0,0.7); pointer-events: none; } .Modal:target { display: flex; pointer-events: auto; } .Modal_Body { position: relative; z-index: 2; display: block; margin: auto; padding: 15px; background: #FFF; } .ModalFull { position: absolute; display: block; z-index: 0; width: 100%; height: 100%; }
Посмотрим сейчас на работу модального окна и разберёмся с тем, как он работает.
Как мы видим, при нажатии на «Открыть модальное окно» всё окно затеняется, а ровно по центру появляется белое модальное окно. На этом пока остановимся и посвятим себя теории.
Поскольку мы договорились не использовать javascript и не можем с помощью негоотслеживать нажатия на элементы, мы можем легко это сделать с помощью css-псевдокласса и якорной ссылки с хешем (для указания элемента на данной странице) и id cо значением, обязательно равным указателю в ссылке. Посмотрите на наш пример: href ссылки и id основного контейнера модального окна имеют одно и то же значение — ModalWindow . Это важно, поскольку браузер должен понимать, какие элементы будут взаимодействовать друг с другом.
В нашем случае общий контейнер модального окна скрыт и, соответственно, скрыто всё содержание модального окна. Но при нажатии на ссылку элемент получает псевдокласс :target и соответственно появляется. Посмотрите в css-код — свойство display меняется с none на flex . Заметьте, именно flex, поскольку с помощью него мы можем выровнить Modal_Body ровно по центру экрана. Все остальные стили мы прописали для него сразу.
Кстати, если вы не совсем поняли, как его так расплющило по всей поверхности экрана, рассказываю — всё дело в следующих 4-х строчках:
Top: 0; right: 0; bottom: 0; left: 0;
Мы указали, что он как-бы должен быть в нулевом пикселе справа, слева, сверху и снизу одновременно. Вместо этого можно использовать, например, такую констукцию:
Width: 100%; height: 100vh;
Здесь мы указываем ширину, равную 100% экрана, а вот высоту лучше установить с помощью viewport height — высоты окна браузера. Я же остановлюсь на своём варианте.
Ещё один важный нюанс — это значение свойства z-index у Modal и Modal_Body . Они должны быть обязательно, и у Modal_Body он обязательно должен быть больше по значению по крайней мере на одну единицу, иначе контент модального окна не будет доступен — ссылки и кнопки будет невозможно нажать. А если там будет предусмотрен контент с прокруткой, то это тоже работать не будет, поскольку один элемент будет перекрывать другой.
Продолжим творить свой шедевр. При нажатии модальное окно появляется, но так же просто закрыть мы его не можем. Давайте добавим кнопку для его закрытия:
Контент внутри окна
ЗакрытьСобственно, она отменяет :target для нашего модального окна и то просто принимает начальное положение — скрывается с глаз долой. Но с этой ссылкой есть некоторая тонкость — при её нажатии браузер попытается найти такой элемент, но потерпит фиаско, и промотает страницу к самому началу. Такое поведение — одно из небольших минусов такого подхода к изготовлению модальных окон, но и с ним можно справиться.
Для этого атрибут href у ссылки мы меняем с «#» на «#ModalWindowClose» , а у ссылки-кнопки, которая открывала окно, дописываем атрибут id c таким же значением. Можно использовать и атрибут name , но в HTML5 для определения якоря лучше и требуется указывать атрибут id .
Открыть модальное окно
Контент внутри окна
ЗакрытьТеперь при нажатии браузер будет откатываться обратно к кнопке. Ради правды хочу сказать, что этот якорь будет располагаться по верхнему краю экрана. Но, если эта кнопка для открытия находится в header’e или footer’e, то это проблема нивелируется. А если у header’a сделано фиксированное положение, то будет вообще отлично — например, для заказа обратного звонка или предварительного заказа/консультации подойдёт отлично и при закрытии окна.
Вот пример того, что у нас получилось:
Можно ещё немного доработать контейнер Modal_Body — это ограничения по размерам (чтобы он не раздавался в высоту и ширину). И ещё один небольшой нюанс — код с модальным окном рекомендую, по возможности, распологать перед закрывающим тегом