Веб-мастерская Ларисы ВоронинойВсплывающее модальное окно на CSS
WEB-мастерская Ларисы Ворониной logo

Всплывающее модальное окно на CSS Фев 21 2017


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

Привожу простой пример, как сделать плавно всплывающее модальное окно на  CSS без скриптов.

HTML разметка выглядит следующим образом:

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css" />
          <title>Всплывающее модальное окно на CSS</title>
     </head>
     <body>
          <div class="wrapper">
               <a href="#win">Открыть модальное окно</a>
                    <div class="window">
                         <a href="#" class="blackout" id="win"></a>
                              <div class="modal">
                                   <h1>Всплывающее модальное окно</h1>
                                   <p>Здесь можно разместить любое сообщение, форму регистрации, подписки, обратной связи и многое другое.</p>
                                   <img src="images/img1.png">
                                   <a class="close" title="Закрыть" href="#close"></a>
                              </div>
                    </div>
           </div>
     </body>
</html>

Пишем стили.

  1. Определяем общий фон. В качестве фона будет изображение с текстурой.
body {
background: url(images/fon.jpg);
}
  1. Центрируем содержимое контента.
.wrapper {
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: center;
}
  1. Пишем стили для  ссылки.
.wrapper a {
font-size: 50px;
font-weight: bold;
color: #000;
text-decoration: none;
}
.wrapper a:hover{
color: #ff0000;
}
  1. Центрируем модальное окно.
.window {
margin: 0 auto;
overflow: hidden;
width: 50%;
}
  1. Пишем правила для слоя с затемнением.
.blackout{
position: fixed;
visibility: hidden;
z-index: 1;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
}
.blackout:target {
visibility: visible;
opacity: 1;
}
  1. Создаём стили непосредственно для самого модального окна.
.modal {
background: linear-gradient(to top,#999,#ddd);
bottom: 0;
z-index: 2;
width: 50%;
height: 50%;
position: fixed;
border: 1px solid #fff;
-webkit-box-shadow: 0px 0px 50px #000;
-moz-box-shadow: 0px 0px 50px #000;
box-shadow: 0px 0px 50px #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
transform: translateY(150%);
-webkit-transform: translateY(150%);
-ms-transform: translateY(150%);
transition: transform 1s ease-out;
-webkit-transition: transform 1s ease-out;
-moz-transition: transform 1s ease-out;
-ms-transition: transform 1s ease-out;
}
.modal img {
width: 50%;
}
  1. Пишем стили для кнопки "закрыть".
.close {
background:#333;
position: absolute;
padding: 0;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
border: 2px solid #fff;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
text-align: center;
text-decoration: none;
line-height: 5px;
transition: background-color ease .7s;
-webkit-transition: background-color ease .7s;
-moz-transition: background-color ease .7s;
-ms-transition: background-color ease .7s;
}
.close:before {
color: #fff;
content: 'x';
font-size: 20px;
}
.close:hover {
background:#ff0000;
}
  1. Активируем модальное окно.
.blackout:target+.modal {
top: 0%;
transform: translateY(50%);
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
}

Скачать исходники.


Рейтинг@Mail.ru