Как создать всплывающее окно для сайта.

5/55 оценки

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

В данном примере при создании всплывающего окна мы будем использовать разметку 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;

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

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

3 комментария

Kris 13.07.2019 в 16:13

Спасибочки! Прям супер! молодчина! Отличная штука:)))) Случайно нашла — работает на сайте отлично!

Ответить
Apoll8 21.06.2020 в 14:22

Не понятно для какой аудитории этот урок. Специалистам это не нужно,сони и без вас знают как это делается.. А для тех кому это требуется, вы многое умолчали. Например куда и как вставляется html код сразу разберется не всякий. Хотите больше внимания к сайту? Давайте больше конкретики, особенно в мелочах.

Ответить
- Василий 21.06.2020 в 15:11
  
  Не нравится проходим мимо, а статьи все на сайте в первую очередь как заметки для себя, а не для кого то, Вы же специалист пришли в поиске решения на наш сайт, а не сами написали решение…
  
  Ответить

Всплывающие окна для сайта

Какие преимущества есть от всплывающих окон?

Недостатки всплывающих окон?

ПОЛЕЗНАЯ РЕКЛАМА НА САЙТЕ

3 комментария

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

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

Как показать текущую дату на сайте?

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

Простые вкладки для сайта на CSS3

Простое всплывающее окно для сайта

Какие преимущества есть от всплывающих окон?

Недостатки всплывающих окон?

ПОЛЕЗНАЯ РЕКЛАМА НА САЙТЕ

Вас также может заинтересовать

3 комментария

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