Модальное окно на CSS
Всем привет, сегодня я бы хотел рассказать Вам о том, как можно реализовать модальное окно на CSS.
Тема является вполне популярной в настоящее время, и начнем мы с того, что я расскажу Вам о том, что же такое модальное окно.
Модальное окно - это окно, в котором находится какая-либо информация, требующая от пользователя обратить на него особое внимание. Если
брать пример на сайте, то при появлении модального окна, основное содержимое сайта затемняется, не позволяя производить какие-либо манипуляции
с ним, а перед Вами появляется окно с определенной информацией (зависит от администратора сайта), которую Вы можете прочитать,
либо заполнить определенную форму. Также обязательным условием модального окна является возможность его закрытия.
Давайте приступим к реализации нашей задачи:
<html>
<head>
<title>Модальное окно на CSS</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="overlay"></div>
<div class="modal">Наше модальное окно</div>
<div class="content">
Некоторый контент для сайта, который послужит примером для нашей задачи.
</div>
</body>
</html>
А теперь применим CSS код:
body {
background: #336dff;
margin: 0;
position: relative;
}
.overlay {
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.modal {
background-color: #336dff;
border-radius: 10px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -125px;
line-height: 150px;
text-align: center;
width: 250px;
height: 150px;
z-index: 11;
}
.content {
height: 100%;
}
Давайте обсудим реализацию. Первый блок с классом overlay отвечает за затемнение фона, а именно мы устанавливаем для
данного блока черный цвет фона и наполовину прозрачность. Позиционируем его, установив при этом ширину и высоту по сто процентов.
Блок с классом modal, как Вы уже догадались, отвечает за наше окно. Задаем ему цвет фона, закругляем углы, задаем
фиксированное позиционирование, ширину и высоту блока. При помощи отступов, которые равны половине ширины и высоты выравниваем
блок по центру экрана. И теперь он будет находиться в данном положении при любом разрешении экрана.
Основные моменты реализации модального окна на CSS я Вам рассказал, а Вам остается лишь осмыслить данный код и при
необходимости использовать его в своих задачах. На этом я прощаюсь с вами, до скорого!
