Простое модальное окно на CSS без JS. Выравнивание модального окна по центру

Модальные окна - часто используемый инструмент в арсенале веб мастера. Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.

Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.

HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.

Первый шаг на пути к созданию модального окна - простая и эффективная разметка:

Открыть модальное окно

Внутри элемента div размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:

Открыть модальное окно X Модальное окно

Пример простого модального окна, которое может быть создано с использованием CSS3.

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

Создаем класс 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; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; }

Наше окно будет иметь фиксированное положение, то есть смещаться вниз, если вы будете прокручивать страницу при открытом окне. Также наш фон черного цвета будет расширяться на весь экран.

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

В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.

Может быть вы не знаете свойство pointer-events , но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog , так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target” .

Теперь добавляем псевдо класс :target и стили для модального окна.

ModalDialog:target { display: block; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }

Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events .

Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.

Теперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:

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: #00d9ff; }

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

Всем привет! В этом небольшом уроке мы создадим простое, но мощное по возможностям модальное окно на чистом 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 — это ограничения по размерам (чтобы он не раздавался в высоту и ширину). И ещё один небольшой нюанс — код с модальным окном рекомендую, по возможности, распологать перед закрывающим тегом .

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

Надеюсь, мой урок был для Вас полезен. Доброго Вам времени суток и до новой встречи на Веб-Островах!

Скорее всего Вы уже не раз видели в интернете всплывающее модальное окно - подтверждение регистрации, предупреждение, справочная информация, загрузка файла и многое другое. В этом уроке я предложу несколько примеров по созданию самых простых модальных окон.

$(document).ready(function()
{
alert("Текст во всплывающем окне");
});

Код вставляете в любое место в body Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:

А вот следующий код будет выполняться после загрузки всей страницы в браузер. В нашем примере после загрузки страницы с изображениями выскочит простое всплывающие окошко:

$(window).load(function()
{
alert("Загрузка страницы завершена!)");
});

Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу

Для начала напишем html-часть . Этот код размещаем в body Вашего документа.

Вызов модального окна

Текст модального окна
Закрыть
Текст в модальном окне.

Код CSS . Либо в отдельном css-файле, либо в в head.

body {
font-family:verdana;
font-size:15px;
}
.link {color:#fff; text-decoration:none}
.link:hover {color:#fff; text-decoration:underline}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top {
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close {
float:right;
}
.content {
padding-top: 35px;
}

В коде jQuery основное внимание уделим позиции модального окна и маске, в нашем случае постепенному затемнению фона.

Внимание! Не забываем подключить библиотеку в head документа!

Подключение библиотеки с сайта Google. Ну и непосредственно сам код jQuery.

Код jQuery

$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css({"width":maskWidth,"height":maskHeight});
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) {
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () {
$(this).hide();
$(".window").hide();
});
});

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

Начинаем делать наше модальное окно.

Шаг 1. Разметка HTML

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

Шаг 2. Содержимое модального окна

Теперь добавим само содержимое нашего окна. Сделаем заголовок и небольшой текст и поместим это все в тег и вставим в код вместо многоточия . Еще нужно вставить ссылку, по которой будет закрываться наше окно и придать ей class="close" . Вот так должен выглядеть ваш код:

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 .