Русский
Українська
English
І так, дорогі друзі як ви вже зрозуміли з назви статті, сьогодні ми будемо говорити про те як додати на сайт спливаюче вікно яке буде з'являтися відразу ж як тільки користувач відкрив ваш сайт або потрібну вам сторінку.
Ви напевно вже не раз помічали даний функціонал який реалізований на багатьох сайтах, і виглядає все це дуже навіть симпатично.
Особисто я звичайно не дуже люблю використовувати всякі там вікна даного роду, але все таки іноді без спливаючого вікна на сайті не обійтися. Так як це дуже зручна можливість піднести вашому відвідувачеві важливу на вашу думку інформацію, про якусь знижку, акцію, новину, або ж просто про щось його повідомити або попередити!
Сьогодні ми розглянемо дуже ефективний і в той же час дуже простий метод виведення спливаючого вікна на сайті, при тому що при відкритті даного popup вікна задній фон сайту буде розмитим, для того що б сконцентрувати всю увагу користувача саме на необхідної інформації яку ви вкажете в даному спливаючому вікні.
Плюс ми додамо в це вікно живу кнопку при кліці на яку користувач потрапить на підготовлену вами заздалегідь сторінку, тим самим ми додамо нашому спливаючому вікну більшої інформативності, тобто зробимо її більш красивою і зрозумілою ....
Приклад того як буде виглядати це спливаюче вікно ви можете подивитися на фото нижче:
Ну або ж ви можете подивитися живий приклад спливаючого вікна у нас на сайті:
Також ви можете скачати готові вихідні нижче.
Ви можете завантажити готовий код скрипту спливаючого вікна по кнопці вище, ну а нижче ми розберемо сам скрипт і його додавання на ваш сайт.
І так приступимо до створення спливаючого вікна яке буде складатися з назви (заголовка вікна), і контейнера з вашим текстом а також кнопкою переходу на заздалегідь підготовлену вами сторінку, так само ми додамо ще звичайно і кнопку закриття вікна з невеликою анімацією.
Пункт перший:
Створюємо оболонку з HTML коду, в який ми помістимо елементи нашого вікна і укладемо все це в єдиний контейнер:
|
1
2
3
4
5
6
7
8
9
|
<div class="row pop-up">
<div class="box small-6 large-centered">
<a href="#" class="close-button">✖</a>
<h3>Ласкаво просимо на сайт</h3>
<p>Тут ми пишемо короткий опис</p>
<p>Ну і звичайно ж повний текст вікна.</p>
<a href="#" class="button">Перейти сюди</a>
</div>
</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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
.cover {
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
}
.blur-in {
-webkit-animation: blur 2s forwards;
-moz-animation: blur 2s forwards;
-o-animation: blur 2s forwards;
animation: blur 2s forwards;
}
.blur-out {
-webkit-animation: blur-out 2s forwards;
-moz-animation: blur-out 2s forwards;
-o-animation: blur-out 2s forwards;
animation: blur-out 2s forwards;
}
@-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@-moz-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@-o-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@-webkit-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
@-moz-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
@-o-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
@keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
.content {
width: 650px;
margin: 0 auto;
padding-top: 100px;
}
span {
color: dimgray;
}
.pop-up {
position: fixed;
margin: 5% auto;
left: 0;
right: 0;
z-index: 2;
}
.box {
background-color: whitesmoke;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
position: relative;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}
.button {
margin 0 auto;
background-color: #FF8566;
margin-bottom: 33px;
}
.button:hover {
background-color: #7CCF29;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}
|
Пункт третій:
Останнім пунктом у нас буде підключення JS коду для можливості відображення вікна, а так само додамо можливість включення і відключення розмиття заднього фону.
|
1
2
3
4
5
6
7
8
9
10
|
$(function() {
$('.pop-up').hide();
$('.pop-up').fadeIn(1000);
$('.close-button').click(function (e) {
$('.pop-up').fadeOut(700);
$('#overlay').removeClass('blur-in');
$('#overlay').addClass('blur-out');
e.stopPropagation();
});
});
|
Ну от як би і все, тепер у вас буде на сайті стильне сучасне а також адаптивне спливаюче вікно, користуйтеся на здоров'я!
Немає коментарів
Ви можете залишити коментар першим.