Демонстрация простого трюка, который позволяет сделать диалоговое / модельное окно на чистом CSS.
Модальное / диалоговое окно на чистом CSS
28.05.2021
Для начала стоит посмотреть демонстрацию.
Вся идея очень проста и базируется на использовании псевдокласса target, но срабатывает когда хэш страницы сайта указывает на id данного элемента.
Проще говоря, сначала мы скрываем окно:
.soModalDialog:target {
display: none;
}
А когда пользователь нажимает на ссылку у корой задан атрибут href="#soModal1" , то срабатывает правило:
.soModalDialog:target {
display: block;
}
Закрытие диалогового окна происходит при изменении хэша адреса станицы с #soModal1, на любое другое.
И сразу приведу код:
HTML
<a href="#soModal1">Открыть</a>
<div id="soModal1" class="soModalDialog">
<div>
<div>
<a href="#close" title="Закрыть" class="close">X</a>
<h2>Заголовок</h2>
<p>Lorem ipsum...!</p>
<p>Lorem ipsum...!</p>
</div>
</div>
</div>
CSS
.soModalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
z-index: 100;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.soModalDialog:target {
display: block;
pointer-events: auto;
}
.soModalDialog > div {
max-width: 400px;
margin: 10% auto;
}
.soModalDialog > div > div {
margin: 0 10px;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
position: relative;
}
.soModalDialog .close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: 12px;
text-align: center;
top: 25px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #FFFFFF;
color: #000;
}