Як створити спливаюче вікно для сайту

5/51 rating

Колись ми вже писали про спливаючі вікна при вході на сайт, а сьогодні ми хочемо написати чергову замітку про спливаючі вікна на сайті, і розглянемо варіант спливаючого вікна при кліці на кнопку або посилання.

В даному прикладі при створенні спливаючого вікна ми будемо використовувати розмітку html, css і js код. Спливаюче вікно буде з'являтися при кліці на посилання або кнопку, і закриватися при кліці по спеціальному тексту або клік за кордоном вікна.

Взагалі спливаючі вікна на сайті або як їх ще називають popup вікно або спливаюче модальне вікно, дуже корисні і дозволяють виводити в них найрізноманітнішу інформацію, наприклад в них можна виводити форму підписки, або форму замовлення, або ж просто якусь додаткову інформацію до якогось елемента на сайті.

За допомогою спливаючих вікон на сайті також дуже зручно і швидко можна збільшити кількість підписчиків. Наприклад якщо добре розкручений сайт приносив в день 10-15 підписчиків з якоїсь непомітної форми підписки, яка розміщувалася десь на сторінках сайту, то при підключенні спливаючого вікна цю кількість можна відразу множити на 100, 200 а іноді і більше відсотків.

При розробці сайтів мене дуже часто клієнти запитують як створити спливаюче вікно, тому я і вирішив написати тут невелику статтю по цьому приводу, ну і плюс зробити для себе невелику замітку.

Які переваги дають спливаючі вікна?

Основна мета спливаючого вікна це привернути увагу вашого відвідувача. При відвідуванні вашого сайту користувач відразу бачить спливаюче модальне вікно, в якому надана якась смакота, тобто якась корисна інформація яку ви ему пропонуєте.
Практика показує що використання спливаючих вікон позитивно впливає на конверсію сайту. Тим самим дозволяє збільшити відвідуваність сайту і кількість переглядів. Ви можете істотно поліпшити результат, отримати більше продажів, або підписчиків ніж від звичайного статичного блоку.
Спливаюче вікно дозволяє створити швидко зворотний зв’язок клієнта з вами, якщо в ньому ви розмістите форму контактів. Або ж ви можете розмістити в ньому відповіді на якісь популярні питання клієнтів, що дозволить вашому відвідувачеві вирішити швидше зв’язатися з вами.

Недоліки спливаючих вікон?

Є звичайно ж і недоліки від модальних спливаючих вікон, список основних недоліків розглянемо нижче:

Багатьох користувачів дратують спливаючі вікна, і вони йдуть з вашого сайту не ознайомившись навіть з основною інформацією, тим самим зменшують відвідуваність вашого ресурсу. Тому намагайтеся робити спливаючі вікна не нав’язливими, і рекомендовано щоб вони з’являлися з затримкою за часом. Також робіть їх акуратними і зручними, наприклад не потрібно робити вікно на всю сторінку сайту, інакше користувач просто не знайде потрібну кнопку закриття, і швидше за все піде до вашого конкурента.
Також не рекомендується вішати на сайт безліч різноманітних спливаючих вікон, так як це може розцінюватися як спам, в результаті чого репутація вашого інтернет ресурсу може різко впасти. Обов’язково прийміть цей факт до уваги.
З’явилося дуже багато блокувальників реклами, які встановлюються в браузері користувача, в такому випадку вашу рекламу відвідувач не побачить. Але не всі користуються даними плагінами і розширеннями, тому сильно засмучуватися не варто, але все ж якийсь відсоток відсівається.

Ну ось власне і все основні факти про використання спливаючих вікон на сайті.

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

Перше вам потрібно перевірити чи підключена у вас бібліотека jQuery, якщо немає то вам її потрібно підключити, наприклад так:

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>

1	<script src="https://code.jquery.com/jquery-1.11.1.js"></script>

Додайте цей код десь між <head> ...</head>, якщо у вас бібліотека jQuery вже підключена, другий раз підключати її не потрібно.

Приклад того як буде виглядати це вікно на фото нижче:

Або подивитися живий приклад, ви можете у нас на сайті:

ДЕМО ПРИКЛАД

Також ви можете скачати готові вихідні нижче.

Завантажити код

І так, для створення спливаючого вікна створюємо найпростішу html розмітку:

<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

</div>

Кнопка приклад 2

</div>

Тема першого першого вікна!

<br>Тобі подобається спорт?

</div>

Тема другого вікна!

<br>Земля кругла?

</div>

Після додаємо JS код на сторінку, або підключаємо його в окремому файлі:

<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>

$(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>

Ну і останній пункт це стилі css для спливаючого вікна:

.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;

.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;

Ну ось власне і все що нам було потрібно для створення простого модального вікна при кліці.

Пробуйте і у вас все вийде, удачі вам в нашій нелегкій справі.

Спливаючі вікна для сайту

Які переваги дають спливаючі вікна?

Недоліки спливаючих вікон?

КОРИСНА РЕКЛАМА НА САЙТІ

Немає коментарів

Залишити відповідь Скасувати відповідь

Анімоване SVG модальне вікно

Як показати поточну дату на сайті?

Стильний відео фон для сайту

Прості вкладки для сайту на CSS3

Просте спливаюче вікно для сайту

Які переваги дають спливаючі вікна?

Недоліки спливаючих вікон?

КОРИСНА РЕКЛАМА НА САЙТІ

Вас також може зацікавити

Немає коментарів

Залишити відповідь Скасувати відповідь