Модальное окно на JS и CSS своими руками

  Александр Маврин   Комментариев нет

popup

Всем привет. Сегодня будем делать самостоятельно модальное окно с использованием чистого JavaScript и CSS. Подобные попап окна очень хорошо делать на jQuery, как это показано в этом примере, но бывают случаи, когда нет необходимости подключать тяжеловесную библиотеку к простой странице. Тем более, что пишется это все в несколько строчек JS кода.

Демо

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

popup-mobile

Давайте начнем с разметки страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="box">
  <input type="button" value="button" id="btn" />
  <p>POPUP CONTENT</p>
  <div id="popup">
    <header>
      <span id="close">+</span>
    </header>
    <div class="content">
      <p>POPUP CONTENT</p>
      <img src="Copy of Stopwatch.svg" width="100" alt="" />
    </div>
    <footer></footer>
  </div>
</div>
<div class="overlay" id="overlay" style="display:none;"></div>

Следующим шагом будет добавление CSS стилей к элементам на странице.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
body {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #d9d9d9;
  font-family: Arial;
}
 
.box {
  width: 90%;
  height: auto;
  background: #fff;
  border-radius: 4px;
  margin: 0 auto;
  z-index: -9999;
  padding: 10px;
}
 
input[type="button"] {
  margin-left: 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#04b709), to(#005d0b));
  background: linear-gradient(#04b709, #005d0b);
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 5px 12px;
  color: #ddd;
  cursor: pointer;
}
input[type="button"]:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(#005d0b), to(#04b709));
  background: linear-gradient(#005d0b, #04b709);
}
 
#popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%;
  height: 250px;
  -webkit-box-shadow: 0 10px 15px #222;
          box-shadow: 0 10px 15px #222;
  border-radius: 5px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-animation: animate 0.5s ease-in-out;
          animation: animate 0.5s ease-in-out;
  background: #fff;
  text-align: center;
  z-index: 999;
}
 
img {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
 
#close {
  position: absolute;
  right: 5px;
  top: -5px;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
  font-size: 35px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  display: block;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#close:hover {
  color: #d9d9d9;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
 
.left {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-animation: left 0.3s ease-in-out;
          animation: left 0.3s ease-in-out;
}
 
header {
  width: 100%;
  height: 30px;
  background: #00d87e;
  border-radius: 5px 5px 0 0;
}
 
footer {
  width: 100%;
  height: 30px;
  background: #00d87e;
  border-radius: 0 0 5px 5px;
  position: absolute;
  bottom: 0;
}
 
.overlay {
  background: rgba(0, 0, 0, 0.8);
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
 
@-webkit-keyframes animate {
  0% {
    opacity: 0.5;
    top: -100px;
    z-index: 1;
  }
  100% {
    opacity: 1;
  }
}
 
@keyframes animate {
  0% {
    opacity: 0.5;
    top: -100px;
    z-index: 1;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  #popup {
    width: 50%;
  }
}

И в заключении подключим JS файл и напишем следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
var popup = document.getElementById('popup'),
  btn = document.getElementById('btn'),
  close = document.getElementById('close'),
  body = document.getElementsByTagName('body');
  btn.onclick = function () {
	  popup.style.display = 'block';
	  document.getElementById("overlay").style.display="block";
 };
  close.onclick = function () {
    popup.style.display = 'none';
    document.getElementById("overlay").style.display="none";		
    }

На этом все. Открытие модального окна происходит после нажатия на кнопку, а закрыть его можно, кликнув на крестик в правом верхнем углу. К нему я добавил для красоты эффект вращения на 360 градусов по часовой стрелке при наведении. В само окно поставил SVG анимацию.

Не стесняйтесь делиться записью в социальных сетях. Спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *