Выравнивание модального окна по центру. Создаем модальное окно с помощью HTML5 и CSS3
Простое модальное окно для сайта можно сделать используя только HTML и СSS код, без использования скриптов. Ведь большое количество скриптов, естественно, дают нагрузку на сайт и замедляют его работу.
Как вариант, посмотрите это простое модальное окно. Минимум кода, но вполне неплохо. Конечно оно не встанет вровень с модальными окнами jQuery, но все-же.
CSS код, который желательно поместить в таблицу стилей, обычно это style.css
/* Начало стилей */ .Window { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; } .Window:target { display: block; pointer-events: auto; } .Window > div { width: 300px; position: relative; margin: 10% auto; padding: 20px; border-radius: 5px; background: #f2f2f2; box-shadow: 0px 0px 20px 2px; } .close { background: #cc3300; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #990000; } /* Окончание стилей */
Регулируйте ширину модального окна меняя размер по ширине на нужный. В коде это место отмечено.
Ну и HTML код, который ставиться в нужное место. Это по сути ссылка на открытие модали.
текст ссылки
Cюда можно разместить любой контент
Пример
Установка простого модального окна в WordPress
Применение модального окна в WordPress практически ничем не отличается от вышеописанного. Можно добавить, что в него можно добавлять шорткод, например обратной связи плагина CF-7.
Если нужно разместить модаль не в публикации, а в файлах шаблона, то просто поставьте html код в нужное место шаблона.
Простое по функциям модальное окно, которое полностью выполнено на чистом CSS, где можно поставить под разные функций для вызова на сайте. Вероятно это одно из многих, что встречал из подборки модальных окно, в плане его простаты настройки, но, а также по установки. Но главное, это его функциональность, которое не будет уступать другим. Также оно по умолчанию сделано под светлый оттенок, где в правом верхнем углу установлена кнопка, виде крестика.Которое будет идти на функцию отключение или просто, чтоб каркас исчез, где даже на этом небольшом элементе есть эффект по смене палитры цвета. Теперь веб мастер можно поставить его на сайт и разместить в нем описание или операторы, что могут выводить разные категорий, как статистика или информер.
Но дело в том, если у вас темный стиль ресурса, то в стилистике можно быстро изменить гамму, а точнее подогнать под оригинальный дизайн. Здесь представлен один из стандартных методов как нужно сделать чистые CSS на модальное окно, что будет запускаться при нажатии на кнопку под ссылкой с привязкой HTML. Сама кнопка идет больше для видимости, где в стилях убрав один класс и останется название, что можно поставить как в навигацию или в панель управление, где находится основной функционал или навигация сайта.
Это при проверке, что все отлично работает:
Приступаем к установке:
Окно с кнопкой
CSS
Butksaton-satokavate {
display: inline-block;
text-decoration: none;
margin-right: 7px;
border-radius: 5px;
padding: 7px 9px;
background: #199a36;
color: #fbf7f7 !important;
}
Anelumen {
display: flex;
position: fixed;
left: 0;
top: -100%;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
opacity: 0;
-webkit-transition: top 0s .7s, opacity .7s 0s;
transition: top 0s .7s, opacity .7s 0s;
}
Anelumen:target {
top: 0;
opacity: 1;
-webkit-transition: none;
transition: none;
}
Anelumen figure {
width: 100%;
max-width: 530px;
position: relative;
padding: 1.8em;
opacity: 0;
background-color: white;
-webkit-transition: opacity .7s;
transition: opacity .7s;
}
Anelumen.lowingnuska figure {
background: #f9f5f5;
border-radius: 7px;
padding-top: 8px;
border: 3px solid #aaabad;
}
Anelumen.lowingnuska figure h2 {
margin-top: 0;
padding-bottom: 3px;
border-bottom: 1px solid #dcd7d7;
}
Anelumen:target figure {
opacity: 1;
}
Anelumen.lowingnuska .compatibg-ukastywise {
text-decoration: none;
position: absolute;
right: 8px;
top: 0px;
font-size: 41px;
}
Anelumen .nedismiseg {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(10, 10, 10, 0.87);
content: "";
cursor: default;
visibility: hidden;
-webkit-transition: all .7s;
transition: all .7s;
}
Anelumen:target .nedismiseg {
visibility: visible;
}
Также нужно знать, что стилистика CSS и псевдокласс, это одна из тех которых не полностью используются по функций CSS с множеством интересных потенциальных приложений.
Он запускается когда URL адрес страницы соответствует идентификатору своему элементу или можно высказать по другому, это когда пользователь перескакивает на определенный элемент на странице.
В данном уроке мы научися создавать модальное окно с помощью HTML5 и CSS3. В уроке мы не будем использовать JS, только полностью CSS3. Модальные окна можно использовать для формы обратной связи, для фото и видео и еще есть множество вариантов его применения.
Начинаем делать наше модальное окно.
Шаг 1. Разметка HTML
Первым делом нам нужно сделать HTML-разметку, т.е. сделать ссылку по которой будет открываться окно, и сделать каркас нашего окна. Для этого пишем вот такой код:
Шаг 2. Содержимое модального окна
Теперь добавим само содержимое нашего окна. Сделаем заголовок и небольшой текст и поместим это все в тег REDSTAR
- проект посвященный вопросам, которые Вас так давно интересовали. На данном проекте размещены бесплатные уроки и статьи по различным темам. Темы очень разнообразны, начиная от простой установки Windows и заканчивая разработкой сайтов. Шаг 3. Стили
Теперь начинаем писать стили для нашего окна. В этом шаге мы сделаем невидимым наше окно. Оно будет появляться только по нажатию на ссылку. Для этого пишем стили для нашего класса modalDialog
: ModalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
} Шаг 4. Функционал и просмотр
В этом шаге мы сделаем так, чтобы наше окно уже начало функционировать. Для этого добавим еще несколько стилей для нашего класса modalDialog
: ModalDialog:target {
opacity:1;
pointer-events: auto;
display: block;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #b8ecfb);
background: -webkit-linear-gradient(#fff, #b8ecfb);
background: -o-linear-gradient(#fff, #b8ecfb);
} На этом шаге вы уже можете просмотреть ваше окно, оно уже функционирует. Но, кнопка close
выглядет не очень красиво. Теперь нам нужно дописать стили для нашего класса close
. Шаг 5. Делаем кнопку close
В этом шаге мы улучшим внешний вид нашей кнопки, которая будет закрывать наше окно. Для этого пишем стили для нашего класса close
: Close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {background: #860015;} Ну теперь наша кнопка выглядет так, как и задумывалось. У вас она должна выглядеть также: На этом данный урок закончен. Спасибо за внимание! Для вашего удобаства я добавил демо-версию и исходные файлы. Если, что то не понятно, то скачайте исходные файлы. Урок для Вас подготовлен командой сайта REDSTAR
. Всем привет! В этом небольшом уроке мы создадим простое, но мощное по возможностям модальное окно на чистом 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
— это ограничения по размерам (чтобы он не раздавался в высоту и ширину). И ещё один небольшой нюанс — код с модальным окном рекомендую, по возможности, распологать перед закрывающим тегом ПРОЕКТ REDSTAR