Как создать простое модальное окно на CSS
Статья, в которой рассмотрим, как сделать адаптивное модальное окно на чистом CSS.

Модальные (всплывающие) окна – это очень популярный элемент интерфейса современных сайтов. Оно может использоваться для вывода различного контента веб-страниц такого, например, как формы (обратной связи, регистрации, авторизации), блоки рекламной информации, изображения, уведомления и др.
В большинстве случаев модальное окно создают на JavaScript. Но его можно создать не только с помощью JavaScript, но и посредством только HTML5 и CSS3.
Демо модального окна
Демонстрацию всплывающего окна, работающего только на HTML5 и CSS3, вы можете посмотреть здесь:
HTML и CSS код модального окна
HTML разметка модального окна:
<div id="openModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Название</h3>
<a href="#close" title="Close" class="close">×</a>
</div>
<div class="modal-body">
<p>Содержимое модального окна...</p>
</div>
</div>
</div>
</div>
Ссылка, с помощью которой осуществляется открытие модального окна:
<!-- openModal - id модального окна (элемента div) -->
<a href="#openModal">Открыть модальное окно</a>
CSS модального окна:
/* стилизация содержимого страницы */
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
background-color: #fff;
}
/* свойства модального окна по умолчанию */
.modal {
position: fixed; /* фиксированное положение */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5); /* цвет фона */
z-index: 1050;
opacity: 0; /* по умолчанию модальное окно прозрачно */
-webkit-transition: opacity 200ms ease-in;
-moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in; /* анимация перехода */
pointer-events: none; /* элемент невидим для событий мыши */
margin: 0;
padding: 0;
}
/* при отображении модального окно */
.modal:target {
opacity: 1; /* делаем окно видимым */
pointer-events: auto; /* элемент видим для событий мыши */
overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 30px auto; /* для отображения модального окна по центру */
}
}
/* свойства для блока, содержащего контент модального окна */
.modal-content {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
outline: 0;
}
@media (min-width: 768px) {
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
}
/* свойства для заголовка модального окна */
.modal-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eceeef;
}
.modal-title {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
font-size: 1.25rem;
font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
float: right;
font-family: sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 15px;
overflow: auto;
}

Если вам необходимо убрать скролл страницы после отображения модального окна, то к элементу body
нужно добавить CSS-свойство overflow
со значением hidden
. А после скрытия модального окна данное свойство убрать у элемента body
. Данное действие можно осуществить только с помощью JavaScript:
document.addEventListener("DOMContentLoaded", function(){
var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
console.log(scrollbar);
document.querySelector('[href="#openModal"]').addEventListener('click',function(){
document.body.style.overflow = 'hidden';
document.querySelector('#openModal').style.marginLeft = scrollbar;
});
document.querySelector('[href="#close"]').addEventListener('click',function(){
document.body.style.overflow = 'visible';
document.querySelector('#openModal').style.marginLeft = '0px';
});
});
Я дублирую html блок с разным описанием, но отображается содержание только первого блока. Можете, пожалуйста, подсказать как решить эту проблему?
Заранее спасибо
jsfiddle.net/AnastasiaWeb/zb3rnq9e/3/
Тут нужно просто установить разным модальным окнам разные id:
После этого указать какая ссылка какое модальное окно должна открывать:
Песочница: открыть пример
Второй вариант — это сделать через JavaScript, как предлагал выше (открыть пример).
Для этого в CSS вставляем следующее правило:
В JavaScript добавляем класс «open» при нажатии на ссылку и удаляем его при нажатии на кнопку «Закрыть»:
А как атрибут base влияет на SEO? Не встречал информации на эту тему.
Если знаете как форму сделать независимой от остальных другим способом то я соглашусь на другой способ. Просто я какой знал способ отличия такой и использовал.
.modal помоему лишнее с ним не работает а без него работает
Теперь у вас в каждой форме будет находится скрытое поле с name=«type» и значением равное name формы:
После этого в вызовах сниппетах FormIt для обработки форм добавить параметр submitVar с соответствующим значением:
убераю это скрытое поле и форма опять не работает. Может у submit должно быть одинаковое имя с &submitVar=`dopolnitform`
Спасибо за текст. Вижу много времени прошло, но рискну задать вопрос.
1) Почему если поместить внутри ссылки картинку, то окно не появляется, только страница тускнеет?
2) не закрывается окно по клику на X, ( я пользую вариант из комментария где много окон)
Я дублирую html блок под каждую новость, чтобы на главной любая аннотация переходила в полную (по Вашему примеру модального окна), но каждая из них лишь отображает содержание первого блока!
Пожалуйста, подскажите, как реализовать под каждую новость!
Спасибо!
Поэтому, когда у вас есть возможность создать что-то без JavaScript и оно вас будет полностью устраивать, то JavaScript использовать не надо.
Сделал по вашему примеру с JS.
Если у меня несколько модальных окон что нужно менять?
Если вы хотите доработать пример с JS, то нужно к ссылкам добавить какой-нибудь признак, который будет определять, что они предназначены для открытия модального окна. Например, атрибут data-toggle=«modal». А атрибут data-target использовать для указания селектора на то модальное окно, которое эта ссылка должна открывать.
Например:
Далее нужно переработать JavaScript код, например, следующим образом:
Ссылка на пример: открыть
На локальной машине шикарно отработал, а на хостинге разворачивает модальные окна сразу :(( Битый час экспериментирую. Посмотрите? Картон и скотч открываются модально. Это получается только в браузере Avast, и IE. А в Эдж и Хроме — сразу открывает.
www.sk-resurs.upakovkaprom.ru/resurs_upakovka.html
У вас в коде ошибка:
И когда вы что-то изменяете, например, в CSS, браузер об этом не знает. Он при следующей загрузки берёт это из своего кэша. Это позволяет браузеру, когда пользователь переходит по страницам сайта или снова возвращается на него через некоторое время, не загружать эти ресурсы.
Для того чтобы браузеру указать, что у вас изменились стили, к ссылке можно просто добавить GET-параметр, например, ver с некоторым значением:
Вместо «#close» можете указать любой другой хэш, здесь основная задача — это сменить «#openModal» на что-то другое. Для него не нужны никакие стили, здесь просто необходимо чтобы CSS правило с селектором «.modal:target» не применялось к элементу (модальному окну).
Можно, например установить href="#":
Пример с этим кодом можно посмотреть на этой странице.
Если на странице несколько модальных окон, то они должны иметь разные id.
Клик за областью можно реализовать, например, так:
Подскажите как сделать тоже самое, но чтобы открывал в pop up другого документа, например test.html
После выполнения условий в браузерной строке остаются якоря #close и #openModal.
Можно ли реализовать тоже самое, но без использования URL, а например, выполнять событие с привязкой к классу?
Спасибо!
1. В CSS заменить селектор .modal:target на .modal.show:
2. Добавить JavaScript (с использованием jQuery):
Если необходимо на JavaScript без использования jQuery, то код можно посмотреть в примере. Пример доступен по этой ссылке.
Когда я прописал JavaScript, то при клике закрытии за пределы окна не работает :(
Пример: itchief.ru/examples/lab.php?topic=javascript&file=modal-01
Описание примера добавлю в статью немного попозже.
На всякий случай ниже код который не хочет так работать