Русский
Українська
English
Когда то мы уже писали о всплывающем окне при входе на сайт, а сегодня мы хотим написать очередную заметку о всплывающих окнах на сайте, и рассмотрим вариант всплывающие окна при клике на кнопку или ссылку.
В данном примере при создании всплывающего окна мы будем использовать разметку html, css и js код. Всплывающее окно будет появляться при клике на ссылку или кнопку, и закрываться при клике по специальному тексту или клик за границей окна.
Вообще всплывающие окна на сайте или как их еще называют popup окно или всплывающее модальное окно, очень полезны и позволяют выводить в них самую разнообразную информацию, к примеру в них можно выводить форму подписки, или форму заказа, или же просто какую либо дополнительную информацию к какому то элементу на сайте.
С помощью всплывающих окон на сайте так же очень удобно и быстро можно увеличить количество подписчиков. К примеру если хорошо раскрученный сайт приносил в день 10-15 подписчиков с какой то незаметной формы подписки которая размещалась где то на страницах сайта, то при подключении всплывающего окна это количество можно сразу множить на 100, 200 а иногда и больше процентов.
При разработке сайтов меня очень часто клиенты спрашивают как создать всплывающее окно, по этому я и решил написать здесь небольшую статью по этому поводу, ну и плюс сделать для себя небольшую заметку.
Какие преимущества есть от всплывающих окон?
- Основная цель всплывающего окна это привлечь внимание вашего посетителя. При посещении вашего сайта пользователь сразу видит всплывающее модальное окно, в котором предоставлена какая то вкусняшка, то есть какая то полезная информация которую вы эму предлагаете.
- Практика показывает что использования всплывающих окон положительно влияет на конверсию сайта. Тем самым позволяет увеличить посещаемость сайта и количество просмотров. Вы можете существенно улучшить результат, получить больше продаж, или подписчиков чем от обычного статического блока.
- Всплывающее окно позволяет создать быструю обратную связь клиента с вами если в нем вы разместите форму контактов. Или же вы можете разместить в нем ответы на какие то популярные вопросы клиентов, что позволить вашему посетителю решить быстрее связаться с вами.
Недостатки всплывающих окон?
Есть конечно же и недостатки от модальных всплывающих окон, список основных недостатков рассмотрим ниже:
- Многих пользователей раздражают всплывающие окна, и они уходят с вашего сайта не ознакомившись даже с основной информацией, тем самым уменьшают посещаемость вашего ресурса. По этому старайтесь делать всплывающие окна не навязчивыми, и рекомендовано что бы они появлялись с задержкой по времени. Так же делайте их аккуратными и удобными, к примеру не нужно делать окно на всю страницу сайта, иначе пользователь попросту не найдет нужную кнопку закрытия, и скорее всего уйдет к вашему конкуренту.
- Так же не рекомендуется вешать на сайт множество разнообразных всплывающих окон так как это может расцениваться как спам, в результате чего репутация вашего интернет ресурса может резко упасть. Обязательно примите этот факт во внимание.
- Появилось очень много блокировщиков рекламы, которые устанавливаются в браузере пользователя, в таком случае вашу рекламу посетитель не увидит.
Но не все пользуются данными плагинами и расширениями по этому сильно расстраиваться не стоит, но все же какой то процент отсеивается.
Ну вот собственно и все основные факты о использовании всплывающих окон на сайте.
А сейчас давайте все же приступим к самому всплывающему окну. Напомню еще раз мы делаем всплывающее окно именно для кнопок и ссылок, то есть окно которое появляться будет только при клике.
Первое вам нужно проверить подключена ли у вас библиотека jQuery , если нет то вам ее нужно подключить, к примеру так:
|
1
|
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
|
Добавьте этот код где то между <head> ...</head>, если у вас библиотека jQuery уже подключена, второй раз подключать ее не нужно.
Пример того как будет выглядеть данное окно на фото ниже:
Или посмотреть живой пример, вы можете у нас на сайте:
Так же вы можете скачать готовые исходники ниже.
|
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
|
<div align="center" class="fond">
<div id="myfond_gris" opendiv=""></div>
<div align="center" style="padding-top:35px;">
<div style="background-color:#2d3b44;" iddiv="box_1" class="mymagicoverbox">
Кнопка пример 1
</div>
<div style="background-color:#cb2025;" iddiv="box_2" class="mymagicoverbox">
Кнопка пример 2
</div>
</div>
<div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;">
Заголовок первого первого окна!
<div class="mymagicoverbox_fenetreinterieur" style="height:150px; ">
<div align="center">
<br>Тебе нравится спорт?
<br><br>
<div style="width:100px" align="center" class="mymagicoverbox_fermer">НЕТ</div>
</div>
</div>
</div>
<div id="box_2" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;">
Заголовок второго окна!
<div class="mymagicoverbox_fenetreinterieur" style="height:150px; ">
<div align="center">
<br>Земля круглая?
<br><br>
<div style="width:100px" align="center" class="mymagicoverbox_fermer">ДА</div>
</div>
</div>
</div>
</div>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script type="text/javascript">
$(document).ready(function(){
$(".mymagicoverbox").click(function()
{
$('#myfond_gris').fadeIn(300);
var iddiv = $(this).attr("iddiv");
$('#'+iddiv).fadeIn(300);
$('#myfond_gris').attr('opendiv',iddiv);
return false;
});
$('#myfond_gris, .mymagicoverbox_fermer').click(function()
{
var iddiv = $("#myfond_gris").attr('opendiv');
$('#myfond_gris').fadeOut(300);
$('#'+iddiv).fadeOut(300);
});
});
</script>
|
|
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
|
.fond {
position:absolute;
padding-top:0px;
top:0;
left:0;
right:0;
bottom:0;
background-color:#1289aa;
}
.mymagicoverbox {
display:inline-block;
color:#ffffff;
padding:10px;
margin:10px;
cursor:pointer;
font-weight:300;
font-family:'Roboto';
-webkit-box-shadow: 0 1px 3px 0 #b5b5b5;
border: 1px solid #a4b9a5;
background-color:#cb2025;
}
.mymagicoverbox_fenetre {
z-index:9999;
position:fixed;
margin-left:50%;
top:100px;
text-align:center;
display:none;
padding:5px;
background-color:#ffffff;
color:#97BF0D;
font-style:normal;
font-size:20px;
font-weight:300;
font-family:'Roboto';
}
.mymagicoverbox_fenetreinterieur {
text-align:center;
overflow:auto;
padding:10px;
background-color:#ffffff;
color:#666666;
font-weight:400;
font-family:'Roboto';
font-size:17px;
border-top:1px solid #e7e7e7;
margin-top:10px
}
.mymagicoverbox_fermer {
color:#CB2025;
cursor:pointer;
font-weight:400;
font-size:14px;
font-style:normal
font-family:'Roboto';
}
#myfond_gris {
display: none;
background-color:#000000;
opacity:0.7;
width:100%;
height:100%;
z-index:9998;
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
|
Пробуйте и у вас все получится, удачи вам в нашем не легком деле. 
3 комментария
Спасибочки! Прям супер! молодчина! Отличная штука:)))) Случайно нашла — работает на сайте отлично!
Не понятно для какой аудитории этот урок. Специалистам это не нужно,сони и без вас знают как это делается.. А для тех кому это требуется, вы многое умолчали. Например куда и как вставляется html код сразу разберется не всякий. Хотите больше внимания к сайту? Давайте больше конкретики, особенно в мелочах.
Не нравится проходим мимо, а статьи все на сайте в первую очередь как заметки для себя, а не для кого то, Вы же специалист пришли в поиске решения на наш сайт, а не сами написали решение…
