Раньше всплывающее окно с диалогом или текстом можно было создать только с помощью длинного кода js (java script), теперь же можно создать точно такое же окно, но уже более легкое с помощью css. Такое окно получило название - модальное.
В этой статье я покажу простой пример создания такого всплывающего окна на чистом css, без примесей js.
Создать его просто очень легко. Получившееся окно должно будет выглядеть так.
See the Pen abvZMBL by Lora Ug (@lora-ug)on CodePen.
Шаг 1. Нужно создать кнопку, которая будет открывать окно. Это будет обычная ссылка. В ссылке будет прописана ссылка #openModal. Эта ссылка будет вызвать блок с таким названием id. Заметьте, что название id должно быть уникальным.
<a href="#openModal"> ☰ Жми меня</a>
Шаг 2.
Создадим сам блок с текстом, который будет вызывать ссылка. Заодно и создадим ссылку-кнопку "Закрыть", чтобы можно было закрыть блок при нажатии на эту кнопку в модальном окне.
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close">X</a>
<p>а вот и текст. представьте, что тут много картинок и текста + какие-то статьи и т.д. ;)</p>
</div>
</div>
Шаг 3.
Теперь осталось прописать сам css код, который будет отвечать за открытие и закрытие модального окна.
.modalDialog
{overflow: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.9);
z-index: 99999;
display: none;
pointer-events: none;
}
.modalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
background-color: #fff;
width: 80%;
padding: 10px 30px;
position: absolute;
left: 8%;
top: 5%;
border-radius: 10px;
z-index: 999;
pointer-events: auto;
cursor: auto;
}
.close {
color: white;
position: absolute;
right: 0px;
top: 0;
padding: 7px;
border-radius:0px 10px 0px 10px;
background:#da2632;
text-decoration:none;
font-size: 20px;
width: 45px;
height: 28px;
font-weight: bold;
text-align: center;
cursor: pointer;
}
.close:hover {
background: red;
}
Собственно, модальное окно готово, но я предлагаю приделать анимацию открытия модального окна. Оно будет выскакивать как мячик. Для этого добавьте свойство -webkit-animation: pulsing 1s ; и animation: pulsing 1s ; а затем добавьте саму анимацию transform + keyframes.
Это чисто для красоты. Об анимации я напишу в отдельной статье про анимацию в css
.modalDialog {overflow: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.9);
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;
}
.modalDialog > div {
background-color: #fff;
width: 80%;
padding: 10px 30px;
position: absolute;
left: 8%;
top: 5%;
border-radius: 10px;
z-index: 999;
pointer-events: auto;
cursor: auto;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6); -webkit-animation: pulsing 1s ;
animation: pulsing 1s ;
}
@-webkit-keyframes pulsing {
0% {
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5)
}
50% {
-webkit-transform: scale(1.0, 1.0);
transform: scale(1.0, 1.0);
}
100% {
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}
}
@keyframes pulsing {
0% {
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5)
}
50% {
-webkit-transform: scale(1.0, 1.0);
transform: scale(1.0, 1.0);
}
}
вот и всё. Окно готово, вы можете изменять его кнопку для открытия окна, можете менять само окно. Развлекайтесь)
p.s. Если вы хотите создать второе такое же окно с ссылкой-кнопкой, то не забывайте поменять id ссылки-кнопки и id самого модального окна на openModal1,2,3…. и т.д. Название каждой новой ссылки с модальным окном должны быть уникальными!!!
