Простое по функциям модальное окно, которое полностью выполнено на чистом CSS, где можно поставить под разные функций для вызова на сайте. Вероятно это одно из многих, что встречал из подборки модальных окно, в плане его простаты настройки, но, а также по установки. Но главное, это его функциональность, которое не будет уступать другим. Также оно по умолчанию сделано под светлый оттенок, где в правом верхнем углу установлена кнопка, виде крестика.
Которое будет идти на функцию отключение или просто, чтоб каркас исчез, где даже на этом небольшом элементе есть эффект по смене палитры цвета. Теперь веб мастер можно поставить его на сайт и разместить в нем описание или операторы, что могут выводить разные категорий, как статистика или информер.
Но дело в том, если у вас темный стиль ресурса, то в стилистике можно быстро изменить гамму, а точнее подогнать под оригинальный дизайн. Здесь представлен один из стандартных методов как нужно сделать чистые CSS на модальное окно, что будет запускаться при нажатии на кнопку под ссылкой с привязкой HTML. Сама кнопка идет больше для видимости, где в стилях убрав один класс и останется название, что можно поставить как в навигацию или в панель управление, где находится основной функционал или навигация сайта.
Также нужно знать, что стилистика CSS и псевдокласс, это одна из тех которых не полностью используются по функций CSS с множеством интересных потенциальных приложений.
Он запускается когда URL адрес страницы соответствует идентификатору своему элементу или можно высказать по другому, это когда пользователь перескакивает на определенный элемент на странице.
Диалоговое окно — это отличный способ вывести короткое сообщение или информацию. В настоящее время модальное окно
является очень популярным элементом веб-дизайна. Если вы добавляете на страницу какой-то особенный контент, то лучше поместить его в модальное окно:
Раньше оно создавалось с помощью JavaScript
, что на данный момент не считается оптимальной практикой. Но HTML5
и CSS3
позволяют без проблем создавать модальные окна. В этом руководстве мы будем использовать CSS3-переходы
, непрозрачность, pointer-event
и цвет фона.
Это модальное окно будет разработано на чистом CSS
. Оно будет адаптивным и должно нормально работать на смартфонах и планшетах. А также на больших экранах с высоким разрешением.
Создание CSS модального окна
Первым делом нам нужно создать простой HTML-код
:
Open Modal!
У нас есть простая ссылка, которая предлагает открыть модальное окно и хэштег modal-one
. Мы будем задавать все стили прямо здесь с помощью классов, поэтому идентификатор используется как хук для создания модального поля.
Помните, что мы будем использовать только CSS
, а не модальное окно JQuery
, поэтому применим псевдо-селектор “:before target
”.
Далее нужно сохранить все содержимое модального окна. Внутри div
мы поместим гиперссылку. Она закрывает контейнер, который мы выводим с помощью CSS
. Затем можно поместить заголовок с несколькими пунктами текста под ним. Наша HTML-разметка
теперь будет выглядеть следующим образом:
Modal in CSS?
×
One modal example here! :D
Задаем стили
Сейчас мы имеем гиперссылку, обернутую в div
. Можно приступить к назначению стилей для контейнера, чтобы сделать его более практичным. Сначала создадим класс modal
для модального окна на CSS
. Для него мы используем псевдоэлемент :before
:
Мы создаем модальное окно
, задав для него фиксированную позицию. Оно будет смещаться вниз, когда пользователь прокручивает страницу.
Дополнительно мы устанавливаем для верхнего, правого, нижнего и левого края значение ноль, чтобы затемненный фон охватывал весь экран. Теперь нужно задать фон, рамку, радиус для .modal-dialog
, а также фиксированную позицию. Наш CSS
код будет выглядеть следующим образом:
Главным преимуществом нашего модального окна является то, что оно создано с использованием только 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
» был подготовлен дружной командой проекта .
В данном уроке мы научися создавать модальное окно с помощью HTML5 и CSS3. В уроке мы не будем использовать JS, только полностью CSS3. Модальные окна можно использовать для формы обратной связи, для фото и видео и еще есть множество вариантов его применения.
Начинаем делать наше модальное окно.
Шаг 1. Разметка HTML
Первым делом нам нужно сделать HTML-разметку, т.е. сделать ссылку по которой будет открываться окно, и сделать каркас нашего окна. Для этого пишем вот такой код:
Шаг 2. Содержимое модального окна
Теперь добавим само содержимое нашего окна. Сделаем заголовок и небольшой текст и поместим это все в тег
и вставим в код вместо многоточия
. Еще нужно вставить ссылку, по которой будет закрываться наше окно и придать ей class="close"
. Вот так должен выглядеть ваш код:
ПРОЕКТ REDSTAR
REDSTAR
- проект посвященный вопросам, которые Вас так давно интересовали. На данном проекте размещены бесплатные уроки и статьи по различным темам. Темы очень разнообразны, начиная от простой установки Windows и заканчивая разработкой сайтов.
Шаг 3. Стили
Теперь начинаем писать стили для нашего окна. В этом шаге мы сделаем невидимым наше окно. Оно будет появляться только по нажатию на ссылку. Для этого пишем стили для нашего класса modalDialog
:
Ну теперь наша кнопка выглядет так, как и задумывалось. У вас она должна выглядеть также:
На этом данный урок закончен. Спасибо за внимание! Для вашего удобаства я добавил демо-версию и исходные файлы. Если, что то не понятно, то скачайте исходные файлы.
Урок для Вас подготовлен командой сайта REDSTAR
.
Всем привет! В этом небольшом уроке мы создадим простое, но мощное по возможностям модальное окно на чистом CSS. И заодно повторим (а для кого и откроем) такую полезную вещь как flexbox. При этом мы будем создавать не просто модальное окно, которое открывается по клику, а которое позиционируется точно по центру экрана. Когда-то давно такое можно было проделать только с помощью javascript, но время идёт и теперь такое можно сделать с помощью буквально 4 строчек кода.
Открыть модальное окно
Контент внутри окна
Всё это модальное окно состоит как бы из двух слоёв — первый слой, который имеет класс ModalWindow
, затемняет всё пространство вокруг модального окна и будет выравнивать содержание окна по центру экрана. Второй слой — класса Modal_Body
— содержит непосредственно сам контент модального окна.
Посмотрим сейчас на работу модального окна и разберёмся с тем, как он работает.
Как мы видим, при нажатии на «Открыть модальное окно» всё окно затеняется, а ровно по центру появляется белое модальное окно. На этом пока остановимся и посвятим себя теории.
Поскольку мы договорились не использовать 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
— это ограничения по размерам (чтобы он не раздавался в высоту и ширину). И ещё один небольшой нюанс — код с модальным окном рекомендую, по возможности, распологать перед закрывающим тегом
.
Вот так можно быстро сделать модальное окно. Этот код, который мы написали, можно использовать в базовом варианте, дописывая нужные стили по необходимости.
Надеюсь, мой урок был для Вас полезен. Доброго Вам времени суток и до новой встречи на Веб-Островах!
Модальные окна - часто используемый инструмент в арсенале веб мастера. Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.
Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.
HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.
Разметка HTML
Первый шаг на пути к созданию модального окна - простая и эффективная разметка:
Открыть модальное окно
Внутри элемента div размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:
Открыть модальное окно
X
Модальное окно
Пример простого модального окна, которое может быть создано с использованием CSS3.
Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.
Стили
Создаем класс modalDialog
и начинаем формировать внешний вид:
Наше окно будет иметь фиксированное положение, то есть смещаться вниз, если вы будете прокручивать страницу при открытом окне. Также наш фон черного цвета будет расширяться на весь экран.
Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index
.
В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.
Может быть вы не знаете свойство pointer-events
, но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog
, так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target”
.
Теперь добавляем псевдо класс :target
и стили для модального окна.
Псевдо класс target
изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events
.
Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.
Закрываем окно
Теперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:
Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.