Popup окно для сайта

Мы сравнили 7 российских и 9 зарубежных сервисов для сбора email адресов по 11 параметрам. Получилась огромная сравнительная таблица.

Когда у нас встал вопрос как собирать и пополнять базу email-адресов, мы подумали о всплывающих окнах. Не как об основном, а дополнительном способе. Но так как pop-up — коварная штука, прежде чем устанавливать что-то на сайт, мы решили подробно изучить тему: отобрали 16 сервисов, провели исследование популярности, а теперь сравнили сервисы. Делимся с вами результатами проделанной работы.

О российских сервисах мы подробно расскажем в серии обзоров. Первый обзор опубликуем совсем скоро.

Каждый сервис мы протестировали — настроили всплывающее окно для сбора email-адресов, установили на сайт, посмотрели как оно выглядит на десктопном и мобильном устройстве. Для точности: устройства MacBook Pro 13 дюймов и IPhone 6.

Сравнительная таблица

Мы сравнили сервисы по следующим критериям:

1) Цены

• Бесплатный тариф
• Тестовый период
• Стоимость минимального тарифа

2) Ограничения при бесплатном использовании

3) Окна

• Типы окон
• Варианты отображения
• Настройки показа
• Шаблоны

4) А/В тест

5) Интеграция с сервисами email-рассылок

6) Акции/партнерка

Дополнительно для каждого сервиса указали доступные языки.

В критерии «Интеграция с сервисами email-рассылок» указан неисчерпывающий список сервисов.

Способ установки не вынесли отдельным критерием. Он одинаков — устанавливается код на нужные страницы сайта.

У каждого сервиса есть статистика и адаптивный дизайн, но по некоторым есть замечания, они описаны в тексте.

Смотреть таблицу.

Дополнения и личные впечатления

Мы не даем оценки сервисам. Просто делимся ощущениями, наблюдениями и тем, с чем столкнулись при тестировании.

Witget

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

Интересно, что А/В тестирование не заявлено отдельной функцией, но тест можно провести: дублируете шаблоны и настраиваете показ в разное время или дни.

Краткий обзор сервиса Witget —>>

PopMechanic

Есть предпросмотр — ПК, планшет, мобильные. Для показа формы на сайте нужно запустить сплит-тест, настроив условия показа. На мобильном, в горизонтальном положении окно не прокручивается вручную к полю для заполнения. Над этим представители сервиса обещали поработать. Есть функция генерации промо-кодов. Их можно передавать в рассыльщики и CRM системы.

Краткий обзор сервиса PopMechanic —>>

JumpOut

Про адаптивность — само окно отображается корректно, а вот заполнять поля неудобно. Окно и поля «убегают» за края экрана. Условие показа окна «Пользователь собирается покинуть сайт» на мобильных устройствах действует иногда с задержкой. Статистика не подробная, просто цифры: сколько раз показано окно и конверсия. Есть серия попапов — позволяет показывать несколько попапов каждому посетителю, через заданное количество дней (похоже на серию писем). Можно настроить показ иконки для закрытия окна. Для интеграции можно использовать код формы любого сервиса. В момент оформления материала сайт сервиса не открывался некоторое время. Печально.

Краткий обзор сервиса JumpOut —>>

MailGet

Тоже простой по набору функций сервис. При регистрации дается 100 кредитов для тестирования сервиса. За одного подписчика списали 5 кредитов. На мобильном окно некорректно работает при горизонтальном положении — нет адаптации, не прокручивается. Личный кабинет удобный и понятный.

Краткий обзор сервиса MailGet —>>

CartProtector

Этот сервис — лидер в нашем исследовании популярности. Количество запросов в поисковиках — 507. Визуально приятный сайт, простой в использовании личный кабинет. «Фишка» сервиса в том, что он отправляет письма с персональным предложением ничего не купившему клиенту, после ухода с сайта. Что называется — берите, пока «горяченький».

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

Интеграции с сервисами email-рассылки нет, но есть экспорт полученных адресов, которые можно потом импортировать в нужный сервис рассылки.
Краткий обзор сервиса CartProtector —>>

Keplerleads

Этот сервис не попал в наше исследование популярности, мы узнали о нем позже. Но решили включить его в сравнение. Нужно поддерживать молодых и перспективных ребят, тем более из России 🙂 Действия после отправки: редирект, закрыть, сказать спасибо. Можно спрятать кнопку «Закрыть». Тестируемый шаблон окна отлично отображается на смартфоне в любом положении экрана. Есть цепочки виджетов. У этих ребят все в порядке с email маркетингом. Они рекордсмены по количеству присылаемых писем в день 🙂

Краткий обзор сервиса Keplerleads —>>

SumoMe

Очень уж замороченный сервис, особенно для тех у кого «английский со словарем». Способ настройки отличается от всех остальных сервисов. Но «не как у всех» не значит лучше. Платить деньги за этот сервис мы бы не стали. Может первое впечатление обманчиво?

WisePops

Среди клиентов в глаза бросились BBC и Гринпис. Включается/отключается показ кнопки закрытия и закрытие при клике на область за окном. Есть предпросмотр — быстрый, т.е открывается прям в конструкторе окна и есть на настраиваемом сайте. Окна не адаптируются под устройства в привычном смысле, но при этом отображаются корректно, содержимое окна «пролистывается» в самом окне. Сложно объяснить, нужно смотреть 🙂 Несмотря на то, что лого на бесплатном тарифе убрать нельзя, оно отображается очень ненавязчиво, в виде звездочки, при наведении на нее появляется название сервиса. Будь у Wisepops бесплатный тариф — мы бы назвали этот сервис нашим фаворитом.

OptinMonster

Полностью платный сервис. Указано, что возвращают деньги, если в течение 14 дней не возникнет любви к нему. Но проверить это мы не решились 🙂 Если вы рискнули — поделитесь, как оно?

Hello Bar

Никакой подробной информации о сервисе не получится узнать, пока не зарегистрируешься. Хитро. Есть предпросмотр на мобильных устройствах и ПК. Окно хорошо адаптировано на любые положения экрана. Думали, за такой стеной загадочности будет очень крутой сервис, но нет — ничего выдающегося для себя не обнаружили.

MailMunch

Много разных полей, можно добавить свое. Можно вставить HTML код своих полей формы, но их нельзя интегрировать с сервисами рассылки. Есть редирект на указанную страницу после подписки. На платном тарифе есть возможность включить функцию «не позволять пользователю закрывать окно, пока он не подписался. Окно хорошо адаптировано на любые положения экрана. Неплохой сервис, но отсутствие подробной статистики на бесплатном тарифе огорчает.

Picreel

После подписки есть два действия — закрыть окно и редирект на указанную страницу. Также можно указать сообщение, которое будет показываться после отправки данных. Есть функции «Скрыть кнопку закрытия» и «Закрывать при клике на затемненную область». Адаптивный дизайн заявлен, но тестируемый шаблон не адаптировался под смартфон. У этого сервиса не самый удобный личный кабинет.

GetSiteControl

Есть предпросмотр на смартфоне и ПК. Можно выбрать в каком месте на сайте будет появляться окно. Есть возможность добавить картинку — свою или из встроенной галереи. Доступные поля для добавления в окно: имейл, имя и имейл. Действия после отправки: закрыть виджет, редирект и ничего не делать. Можно настроить текст сообщения после отправки. Окно хорошо адаптировано на любые положения экрана.

Malerex

Довольно простой по набору функций сервис. Стандартные поля: имя, email, телефон и одно поле можно добавить свое. Каждое из полей можно сделать обязательным. Есть предпросмотр на ПК, планшете и смартфоне. Условие показа «Пользователь собирается покинуть сайт» не действует на мобильных устройствах.

При обращении в поддержку сервиса пришел автоответ, что работа над развитием сервиса приостановлена. Действующих клиентов это не коснется, но обновлений не будет. Сервис работал некоторое время, а пару недель назад сайт перестал открываться.

ManyContacts

Большую часть экрана в личном кабинете занимает предложение оплатить тариф. В сервисе минимум настроек отображения окна. В сообщение после заполнения формы можно прикрепить файл или ссылку. Параметр «Открывать окно при уходе» не работает на смартфоне. Окно корректно адаптируется под все положения экрана.

OptiMonk

Есть предпросмотр на смартфоне, ПК и планшете. Настраивается показ кнопки закрытия с задержкой. Можно включить/выключить описание в окне и оставить только заголовок и поля. Можно настроить поля со своими названиями. Есть настройка действия после отправки (показать благодарность, закрыть или редирект) и добавление политики конфиденциальности. Условие показа «При уходе» работает только на ПК. Окно хорошо адаптировано на любые положения экрана.

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

Если вы работали с одним, а может и с несколькими из этих сервисов — делитесь впечатлениями в комментариях.

openrate.us

Всем привет!
В этой статье я выложу готовый код для сайта, с помощью которого вы сможете сделать всплывающее окно на CSS при клике по ссылке или через указанное время. Да, именно на CSS, при этом никакого JS или jQuery.
Всплывающее окно вы сможете вставить сообщение для пользователей, форму обратной связи, форму для входа или регистрации, видео ролик и т.д.

Я думаю, стоит показать вам демонстрацию всплывающего окна:

Итак, чтобы заработало всплывающее окно, пропишите в CSS вот такие стили:

  /* Базовые стили слоя, затемнения и модального окна */  .overlay {  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 10;  display: none;  /* фон затемнения */  background-color: rgba(0, 0, 0, 0.65);  position: fixed; /* фиксированное позиционирование */  cursor: default; /* тип курсора */  }    /* активируем слой затемнения */  .overlay:target {  display: block;  }    /* стили модального окна */  .popup {  top: -100%;  right: 0;  left: 50%;  font-size: 14px;  z-index: 20;  margin: 0;  width: 85%;  min-width: 320px;  max-width: 600px;  /* фиксированное позиционирование, окно стабильно при прокрутке */  position: fixed;  padding: 15px;  border: 1px solid #383838;  background: #fefefe;  /* скругление углов */  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  -ms-border-radius: 4px;  border-radius: 4px;  font: 14px/18px 'Tahoma', Arial, sans-serif;  /* внешняя тень */  -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);  -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);  -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);  box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);  -webkit-transform: translate(-50%, -500%);  -ms-transform: translate(-50%, -500%);  -o-transform: translate(-50%, -500%);  transform: translate(-50%, -500%);  -webkit-transition: -webkit-transform 0.6s ease-out;  -moz-transition: -moz-transform 0.6s ease-out;  -o-transition: -o-transform 0.6s ease-out;  transition: transform 0.6s ease-out;  }    /* активируем модальный блок */  .overlay:target+.popup {  -webkit-transform: translate(-50%, 0);  -ms-transform: translate(-50%, 0);  -o-transform: translate(-50%, 0);  transform: translate(-50%, 0);  top: 20%;  }    /* формируем кнопку закрытия */  .close {  top: -10px;  right: -10px;  width: 20px;  height: 20px;  position: absolute;  padding: 0;  border: 2px solid #ccc;  -webkit-border-radius: 15px;  -moz-border-radius: 15px;  -ms-border-radius: 15px;  -o-border-radius: 15px;  border-radius: 15px;  background-color: rgba(61, 61, 61, 0.8);  -webkit-box-shadow: 0px 0px 10px #000;  -moz-box-shadow: 0px 0px 10px #000;  box-shadow: 0px 0px 10px #000;  text-align: center;  text-decoration: none;  font: 13px/20px 'Tahoma', Arial, sans-serif;  font-weight: bold;  -webkit-transition: all ease .8s;  -moz-transition: all ease .8s;  -ms-transition: all ease .8s;  -o-transition: all ease .8s;  transition: all ease .8s;  }    .close:before {  color: rgba(255, 255, 255, 0.9);  content: "X";  text-shadow: 0 -1px rgba(0, 0, 0, 0.9);  font-size: 12px;  }    .close:hover {  background-color: rgba(252, 20, 0, 0.8);  -webkit-transform: rotate(360deg);  -moz-transform: rotate(360deg);  -ms-transform: rotate(360deg);  -o-transform: rotate(360deg);  transform: rotate(360deg);  }  

HTML (Ссылки на вызов модальных окон):

  <!-- Ссылки на вызов модальных окон-->  <a href="#win1">Открыть окно </a>  

HTML (модальное окно):

  <!-- Модальное окно №1 -->  <a href="#x" class="overlay" id="win1"></a>  <div class="popup">  Здесь вы можете разместить любое содержание, текст с картинками или видео!  <a class="close"title="Закрыть" href="#close"></a>  </div>  

В строку №4 вставляете содержимое.

Теперь усложним немного задачу. Сделаем так, чтобы всплывающее окно появлялось через указанный промежуток времени. Потом, после закрытия окна, появлялась кнопка для повторного вызова этого же всплывающего окна.
Я думаю, лучше посмотреть работу кода в живую.

Итак, чтобы такого добиться, добавьте в CSS:

  #wrap{  display: none;  opacity: 0.8;  position: fixed;  left: 0;  right: 0;  top: 0;  bottom: 0;  padding: 16px;  background-color: rgba(1, 1, 1, 0.725);  z-index: 200;  overflow: auto;  }    #window{  width: 400px;  height: 400px;  margin: 50px auto;  display: none;  background: #fff;  z-index: 200;  position: fixed;  left: 0;  right: 0;  top: 0;  bottom: 0;  padding: 16px;  }    .close {  margin-left: 364px;  margin-top: 4px;  cursor: pointer;  border: 2px solid #ffb5b5;  color: #ffb5b5;  background: #cc0000;  padding: 10px 14px;  border-radius: 30px;  font-weight: bold;  }    .close:hover {  color: #fff;  background: #f98d8d;  }    button#zayavka-fahcize {  /* float: right; */  position: fixed;  right: 5px;  bottom: 1px;  background: linear-gradient(to bottom, #0bc408 0%,#09a206 100%);  color: #fff;  font-size: 20px;  text-shadow: 0 1px 0 #757575;  padding: 4px 0 5px 0;  margin: 0;  cursor: pointer;  border: 0;  border-top: 1px solid #87c286;  border-right: 1px solid #0e780c;  border-left: 1px solid #0e780c;  border-bottom: 1px solid #0e780c;  box-shadow: 0 -1px 0 #0e780c, 0 1px 0 #fff;  width: 200px;  border-radius: 2px;  }    button#zayavka-fahcize:hover {  background: linear-gradient(to bottom, #0bc408 0%,#09a206 0%);  }  

HTML:

  <!--задний фон-->  <div onclick="show('none')" id="wrap"></div>  <!-- Всплывающее окно-->  <div id="window">  <!-- Крестик-->  <span class="close" onclick="show('none'); document.getElementById('zayavka-fahcize').style= 'display: block !important';">X</span>  <div>Тут много текста.....................</div>  </div>    <!--Кнопка, которая появится после закрытия всплывающего окна-->  <button onclick="show('block')" id="zayavka-fahcize">Заявка</button>  

JS (тут без этого ни как):

  <script type="text/javascript">  //скрываем кнопку изначально  document.getElementById('zayavka-fahcize').style= "display: none !important";    //Функция показа  function show(state)  {  document.getElementById('window').style.display = state;  document.getElementById('wrap').style.display = state;  }    <!-- появление окна попандер через 5 сек. -->  function explode(){  document.getElementById('window').style= "display: block !important";  document.getElementById('wrap').style= "display: block !important";  }  setTimeout(explode, 5000); //5000 это время, через которое нужно запустить функцию (5 секунд = 5000 миллисекунд)  </script>  

Строка №17 – вы указываете в миллисекундах, когда должно появиться всплывающее окно. В моем случае это 5000 миллисекунд (5 секунд). Кстати, вам наверно будет интересно почитать статью про функцию setTimeout.

Это все, пользуйтесь на здоровье!
Ну и, естественно, не забывайте делиться с друзьями этой информацией!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

bloggood.ru

HTML

<div align="center" class="fond">    <div id="myfond_gris" opendiv=""></div>    <div align="center" style="padding-top:35px;">    <div style="background-color:#00a096;" iddiv="box_1" class="mymagicoverbox">  Нажми на меня !  </div>    <div style="background-color:#cb2025;" iddiv="box_2" class="mymagicoverbox">  И на меня тоже...  </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>    <link href='http://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'>    <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 style="padding-top:35px;" align="center">   <div style=" color:#ffffff; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;"><font style="font-weight:400;">Wordpress-club.com</font></div>  </div>  </div>

CSS

.fond {   position:absolute;   padding-top:45px;   top:0;   left:0;   right:0;   bottom:0;   background-color:#f8b334;  }  .mymagicoverbox {   display:inline-block;   color:#ffffff;   padding:10px;   margin:10px;   cursor:pointer;   font-weight:300;   font-family:'Roboto';  }  .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;  }

JS

$(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);  });    });

wp-lessons.com

<div class="link_group">  	<a class="show_popup" rel="reg_form" href="#">Зарегистрируйтесь</a>  	<a class="show_popup" rel="photo_win" href="#">Галерея</a>  	<a class="show_popup" rel="tabs_info" href="#">Окно со вкладками</a>  </div>  

/**********popup links**********/  .link_group {  margin:20px auto;  width:555px;  text-align:center;  }  .link_group a {  margin:0 20px;  padding:5px 15px;  color:#000;  font-weight:bold;  display:inline-block;  vertical-align:top;  *display:inline;  *zoom:1;  position:relative;  text-decoration:none;  text-transform:uppercase;  border:1px solid #ccc;  -moz-border-radius:3px;  -webkit-border-radius:3px;  border-radius:3px;  behavior: url(PIE.htc);  }  .link_group a:hover {  color:#cc0000;  }  

<div class="popup reg_form">  	<a class="close" href="#">Close</a>  	<h2>Регистрация на сайте</h2>  	<form method="post" action="">  		<label for="login">Введите логин:</label>  		<input type="text" name="login" />  		<label for="password">Введите пароль:</label>  		<input type="password" name="password" />  		<input type="submit" value="Войти" />	  	</form>  </div>  

<div class="popup photo_win">  	<a class="close" href="#">Close</a>  	<h2>Галерея</h2>  	<div class="img_wrap">  		<img alt="" src="/images/pic_1.png" />  		<img alt="" src="/images/pic_2.png" />  		<img alt="" src="/images/pic_3.png" />  		<img alt="" src="/images/pic_2.png" />  		<img alt="" src="/images/pic_3.png" />				  		<img alt="" src="/images/pic_1.png" />				  	</div>  </div>  

<div class="popup tabs_info">  	<a class="close" href="#">Close</a>  	<h2>Вкладки (tabs)</h2>		  	<div class="selectTabs">  		<ul class="lineTabs">  			<li class="active"><a href="#">Удобства вкладок</a></li>  			<li><a href="#">Преимущества вкладок</a></li>  		</ul>  		<div class="tab_content">  			<div class="tab1">  				<p>Tabs - элемент интерфейса для отображения группы документов таким образом, что только 1 активный документ показан, а остальные спрятаны. Пришёл этот элемент интерфейса в компьютеры из офисного быта: папки с документами разделялись такими закладками на группы. Ну и конечно телефонные книги часто разделены табами по алфавиту.</p>  			</div>  			<div class="tab2">  				<p><img alt="" src="/images/tabs.jpg" /> Табы показаны в одном месте, рядом. Отсюда — удобство навигации. И целостность навигации, что тоже важно. Все уже привыкли к табам, так как видят и используют их везде (те же телефонные книжки, каталоги в библиотеках, и т.д.). А значит и домохозяйка знает, как они работают.</p>  			</div>  		</div>  	</div>			  </div>  

/**********All styles popup**********/  .popup {  padding:5px 15px 15px;  position:fixed;  top:100px;  left:50%;  display:none;  overflow:hidden;  border:1px solid #ccc;  background:#fff;  -moz-border-radius:15px;  -webkit-border-radius:15px;  border-radius:15px;  z-index:100;  behavior: url(PIE.htc);  }  .popup h2 {  font:bold 18px/32px Arial, san-serif;  }  .popup a.close {  width:16px;  height:16px;  display:block;  text-indent:-9999px;  position:absolute;  top:10px;  right:10px;  background:url(../images/close.png) no-repeat;  }  

/**********popup with form**********/  .reg_form {  margin-left:-200px;  width:400px;  }  .reg_form form {  margin-top:10px;  }  .reg_form label {  width:100px;  height:26px;  font:bold 12px/26px Arial, san-serif;  display:inline-block;  vertical-align:top;  *display:inline;  *zoom:1;  }  .reg_form input[type=text], .reg_form input[type=password] {  margin-bottom:10px;  padding:0 3px;  width:274px;  height:22px;  font:bold 12px/26px Arial, san-serif;  border:1px solid #ccc;  }  .reg_form input[type=submit] {  margin:10px 15px 0 0;  padding:3px 10px;  float:right;  background:#ccc;  border:0;  -moz-border-radius:3px;  -webkit-border-radius:3px;  border-radius:3px;  font:bold 10px Arial, san-serif;  text-transform:uppercase;  position:relative;  cursor:pointer;  behavior: url(PIE.htc);  }  .reg_form input[type=submit]:hover {  color:#fff;  }  

/**********popup with pictures**********/  .photo_win {  margin-left:-250px;  width:500px;  }  .img_wrap {  margin-top:10px;  width:100%;  overflow:hidden;  }  .img_wrap img {  margin:0 10px 10px;  height:187px;  }  

/**********popup with tabs**********/  .tabs_info {  margin-left:-250px;  width:500px;  }  /*tabs links*/  .selectTabs {  margin:10px 0 0;  width:100%;  }  .lineTabs {  width:100%;  float:left;  list-style:none;  }  .lineTabs li {  margin:0 0 -1px 10px;  float:left;  position:relative;  z-index:1;  border:1px solid #ccc;  }  .lineTabs li.active {  border-bottom:1px solid #fff;  }  .lineTabs li.active a {  color:#cc0000;  }  .lineTabs a {  padding:4px 15px;  display:block;  text-decoration:none;  color:#000;  font-weight:bold;  font-size:10px;  text-transform:uppercase;  }  /*tabs content*/  .tab_content {  width:100%;  float:left;  border:1px solid #ccc;  -moz-border-radius:0 0 5px 5px;  -webkit-border-radius:0 0 5px 5px;  border-radius:0 0 5px 5px;  position:relative;  behavior: url(PIE.htc);  }  .tab_content div{  display:none;  }  .tab_content .tab1 {  display:block;  }  .tab_content .tab1, .tab_content .tab2 {  padding:10px 5px;  }  .tab_content img {  margin:0 10px 5px 0;  float:left;  }  

/**********overlay styles**********/  #overlay {  width:100%;  height:100%;  position:fixed;  top:0;  left:0;  display:none;  background:#000;  opacity:.8;  }  

$(function () {  	//script for popups  	$('a.show_popup').click(function () {  		$('div.'+$(this).attr("rel")).fadeIn(500);  		$("body").append("<div id='overlay'></div>");  		$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});  		return false;				  	});	  	$('a.close').click(function () {  		$(this).parent().fadeOut(100);  		$('#overlay').remove('#overlay');  		return false;  	});  	  	//script for tabs  	$("div.selectTabs").each(function () {  		var tmp = $(this);  		$(tmp).find(".lineTabs li").each(function (i) {  			$(tmp).find(".lineTabs li:eq("+i+") a").click(function(){  				var tab_id=i+1;  				$(tmp).find(".lineTabs li").removeClass("active");  				$(this).parent().addClass("active");  				$(tmp).find(".tab_content div").stop(false,false).hide();  				$(tmp).find(".tab"+tab_id).stop(false,false).fadeIn(300);  				return false;  			});  		});  	});  });  

siteis.ru

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

Способ №1 – на чистом html5 и javascript

Как ни странно, сегодня такое окно можно сделать без всяких jquery плагинов. Для этого нам потребуется элемент из html5 – dialog.

Чем будет хорошо этот способ? Во-первых, блок открывается только по желанию пользователя. То есть только в том случае, если он сам нажмет на кнопку. Также он в любое время может закрыть окошко и никогда больше его не открывать. Естественно, это только разметка, чтобы все работало, нужно добавить еще javascript. В разметке в контейнере dialog может быть все, что угодно: картинки, таблицы, видео и т.д. Абзац там только для примера.

Обязательно во всплывающем окне должна быть кнопка его закрытия. Хорошо, с разметкой разобрались, а вот и скрипт:

Отлично. В таком формате стоит вставлять код в html-файл, либо же вы можете скопировать этот код (кроме тегов script) в отдельный javascript-файл и подключить его к html. Смотрите сами, как вам удобнее. Вот так выглядит страница, если ее открыть в браузере:

У меня всего лишь одна кнопка, но в реальном примере это был бы какой-нибудь сайт, и там где-нибудь в виджете была бы кнопка для вывода всплывающего окна. Ну а так выглядит само окно:

Как видите, его можно в любой момент закрыть. У меня оно выглядит нестандартно, так как я добавил некоторые стили селектору dialog:

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

Придаем модальные свойства

Все хорошо, но это окно не модальное, то есть при его открытии другие элементы не блокируются и по ним тоже можно нажимать, можно выделять текст и т.д. Чтобы сделать его модальным, ищем в скрипте строчку:

А чтобы фон при открытии модального окна затемнялся, добавьте такой код в css:

Откройте и вы увидите разницу, все остальные элементы на странице будут заблокированы, пока вы не закроете блок с помощью соответствующей кнопки.

Минус вывода всплывающего окна на html5 с в том, что dialog поддерживается очень плохо. Конечно, сейчас я вам все показывал в последней версии Google Chrome и тут все отлично работает, но в целом тег поддерживается слабо, хотя можно подключить polyfill специально для этого элемента.

Да, зашел я тут на caniuse.com, поддерживает тег только Chrome и Opera на текущий момент.

Вариант для тех, у кого WordPress

Если у вас WordPress и вы хотите решение в виде готового простого плагина, то оно есть. Этот плагин называется WP Tactical Popup и в нем очень много настроек. Например, можно указать количество просмотренных страниц пользователем, после которых появится окно, можно указать таймер, по истечению которого оно появится. Также есть возможность указывать интервал показа одному человеку, чтобы сильно не раздражать. В общем, на мой взгляд, это просто очень хорошее готовое решение.

В модальное окно можно вставить html-код, картинку или форму подписки.

Вариант 3 – на фреймворке Bootstrap

В Bootstrap поддерживает jquery-плагин modal.js. Если вы используете этот фреймворк в своей верстке, то оптимально создавать красивое всплывающее окно именно с его помощью. Для начала вам потребуется: скачать и подключить Bootstrap, скачать и подключить jQuery

Разместить нужный код на нужной странице, после чего написать небольшой веб-сценарий. Подробное описание этого способа с примером вы можете найти на сайте http://bootstrap-ru.com. Пожалуй, это и будет самый оптимальный способ.

Что ж, мы рассмотрели три способа создания всплывающего окна, а если вы хотите лучше разобраться в javascript, то рекомендую к просмотру наш курс по этому языку, а также самой известной его библиотеке – jQuery.

webformyself.com

Как сделать всплывающее окно html с разными стилями

Давайте рассмотрим основные примеры работы с разными способами создания окон и разберем каждый пошагово.

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

Первоначально лучше рассмотреть пример с использованием html и javascript. Первоначально нужно подключить к странице библиотеку jq. Для этого используйте команду «команда 1» . Ее нужно вставить в самое начало файла, если не выполнить подключение к библиотеке, то нужные fadeIn, fadeOut и т. п. не заработают.

Первоначально создается тэговая конструкция страницы, которая в основном состоит из блоков div. В приведенном примере javascript выводит информацию из разных объектов, поэтому можно вписывать второй div, придав ему параметр iddiv= «box_» после нижнего подчеркивания указывается уникальное число.

В показанном примере создаются базовые кнопки и сообщения. Для этого пишутся тэги <div>. В начале кода подключайте необходимые файлы и библиотеки.

<script src=»/script.js»></script> — применяется для подключения jq библиотеке с необходимыми функциями.

Теги <div> — являются объектами страницы, благодаря ним создаются все кнопки и сообщения. К ним приписаны параметры style= «» для локального вписывания нужных стилей.

Id= «»  и class= «»- параметры, которые позволяют дать объектам имя для отличия их друг от друга, в дальнейшем название, вписанное в кавычки, используется при создании стилей оформления.

Iddiv =»»- обозначает имя переменной, которая в дальнейшем будет использоваться в jquery скрипте.

Остальные тэги и параметры в основном имеют украшающую функцию, придавая странице приятный для просматривания вид. Их можно убрать, от этого поменяется внешнее представление страницы. Также их можно прописать в стилях css при желании.

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

Самую важную функцию открытия и закрытия блоков играет jq код, который дословно можно расшифровать:  «При нажатии на кнопку с тэгом class=«mymagicoverbox» в течение секунды выводи блок, с необходимым iddiv».  Вторая часть используется для скрытия элементов.

На этом код заканчивается. Он отлично подходит для демонстрации того, как происходит работа скриптов на странице, в примере применяется довольно много строк на странице, что приносить дискомфорт при работе с документом.  

Полноценный файл в сборке выглядит так.

Подобным вариантом кода не пользуются на современных Интернет-ресурсах, так как файл длинный и неудобный для изменения. Для вставки на используемый интернет-магазин предпочитают использовать jquery. Но на данном примере подробно показано, что можно создать красивый анимированный, раскрывающийся, информационный блок без вспомогательных гаджетов типа jq UI.

Конечный результат выглядит следующим образом:

Pop-up окна для сайта на jquery

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

Первоначально требуется подключить необходимые библиотеки из интернета или локального хранилища. В приведенном случае это необходимо для jquery и библиотеки jq UI.. Для этого в начале документа пропишите:

Если имеется желание, то можно скачать набор виджетов с сайта разработчика с различными встроенными css. Также можно самостоятельно корректировать таблицу стилей после ее загрузки.

Если не хочется создавать собственные стили, то используйте общедоступные ресурсы:

Главное создать блок <div> или <p> с уникальным именем, именно он будет отображаться при выводе текста, вся информация из блока будет выводиться в сообщении. Также потребуется объект, при нажатии на который осуществляется вывод информации на экран пользователя, для этого используют ссылку <a> или кнопку <button>.

Чтобы вызвать функцию dialog потребуется скрипт на jquery. В скобках после знака доллара записывается уникальное имя блока div через решетку, например, $(#OpenButton) далее идет описание объекта, действия, функции.

Конструкция dialog(«метод») применяется для кнопок, чтобы они выполняли какое-либо действие, связанное с виджетом. Кроме метода «open»  при нажатии на элемент можно выполнить следующие действия (название метода и как он влияет на виджет):

• destroy – удалить;
• проявить;
• isOpen– проверить, отображается ли объект;
• enable – включить;
• disable – выключить;
• close – закрыть;
• изменить опции.

В дальнейшем эти методы можно использовать в параметрах buttons, пример с использованием option и close в данном свойстве.

Для назначения свойств используется конструкция «свойство: значение». Если передается два значения, например для свойства позиции, то конструкция выглядит следующим образом: «свойство: [«значение 1», «значение 2»]».

Значения должны иметь одинаковый тип данных:

• [«строковая, строковая»]
• [число, число]

Чтобы понять особенности использования синтаксиса рассмотрите пример использования свойств для виджета:

Этот код и является полноценным описанием jquery  для dialog UI. Необязательно использовать все опции, при их отсутствии в коде в функцию передается значение, установленное разработчиком по умолчанию.

Полностью оконченный документ выглядит следующим образом:

В примере использовались общедоступные css и js на серверах google. Если имеется желание, то все файлы можно скачать на сервер и изменять их на свое усмотрение.

Jq UI удобно использовать из-за его понятной конструкции, множеству доступных опций и методов. Также на сайте разработчика предоставляются различные css стили для оформления элементов. Если имеется желание, то всем объектам можно прописать стили, используя bootstrap. Или же можно доработать официальные стили, изменив значение в параметрах css.

В приведенном примере все коды содержатся в единой сборке, при разработке на сайте удобней разделить js, css и html по разным файлам. Это значительно удобнее при доработке, так как не потребуется просматривать множество различных скриптов на одной странице.

Поп-ап окно для сайта с использованием html5 и javascript

Современные языки программирования javascript и html 5 позволяет создать всплывающие блоки без использования jq и дополнительных плагинов. Чтобы заменить $ (основной элемент в jquery) используется функция querySelector.

Первоначально создается html основа в виде объекта, который будет выводить информацию для пользователя. Для этих целей используется тэг <dialog>. Если его создать без кнопок запуска, то он не будет отображаться.  Поэтому создаем кнопки скрыть, показать.

Для этого используются тэги <buttons>. Чтобы они были различны между собой, каждому из элементов задаем уникальное значение через id=»». Оно в дальнейшем будет использоваться в javascript.

Если имеется желание придать модальность отображаемой информации  (задний фон затемняется) вместо dialog.show(); нужно использовать dialog.showModal();

Так как в javascript отсутствует встроенная анимация для show и hide, то действия отображаются резко и некрасиво. Подобные особенности нужно отдельно регулировать при помощи css и js.

Всплывающее окно при нажатии на ссылку или текст

Не всегда нужно создавать красивое окно с множеством декоративных стилей и анимаций. В некоторых случаях пользователю достаточно вывести предупредительное окно с важной информацией.  Для этого в javascript предусмотрена функция alert. Запускается она элементарно:

<a href=»/» onclick=»alert(‘предупреждение для пользователя’);return false»>ссылка запуска alert</a>

Чтобы ее использовать при нажатии на кнопку или ссылку потребуется в тэг <a> вписать дополнительные параметры. Главную задачу здесь выполняет событие onclick. В его значении нужно указать, что именно будет запускаться. В примере таковым является сообщение alert(«предупреждение с сайта»).

В тэге <a> через onclick можно вызывать всплывающее окно html. Для этого нужно предварительно создать переменную, в которую записана функция с отображением всплывающего предупреждения.

Вызов предупреждения через ссылку

Чтобы подобным вариантом отобразить необходимую информацию можно в значении onclick использовать функцию отображения. Код выглядит следующим образом:

После прочтения материала пользователь сумеет самостоятельно сделать всплывающее окно с красивой анимацией. При этом он может использовать несколько различных способов для осуществления цели: чистый javascript, jquery UI и универсальные дополнения для CMS.

Надеюсь, материал был весьма полезен, и вы поделитесь им с помощью репоста в социальных сетях. До скорых встреч и не забываем подписываться на рассылку. Всех благ.

Возможно будет интересно почитать:

• Создаем Лендинг пейдж пошагово + исходники.

С уважением, Галиулин Руслан.

firelinks.ru

Самый простой способ установки всплывающего окна – ссылка

Для того, чтобы на вашем сайте появилось всплывающее (модальное) окно, его предварительно нужно создать, или оно уже должно существовать. То есть вам нужно будет знать ссылку на желаемое всплывающее окно.

Для создания лучше пользоваться отдельным HTML редактором (я пользуюсь DreamWeaver или NotePad++), наполнить страницу необходимым содержимым и сохранить как html файл. Далее загрузить этот файл на свой сайт.

Сам способ по своей структуре – это обычная ссылка с подключением внутри нее JavaScript. Поэтому эту ссылку при редактировании страницы нужно вставлять в режиме HTML в том месте, где Вы ходите чтобы появилась ссылка, при нажатии на которую информация открывается во всплывающем окне.

Вот пример моего кода, примененного на этой странице:

А вот собственно и результат Открыть “Мое всплывающее окно”

Синтаксис window.open

Открытие окна происходит с помощью javascript метода window.open.

Например, в коде предоставленном мною окна такие атрибуты:
width=845 (ширина окна)
height=400 (высота окна)
status=no (строку состояния НЕ отображать)
toolbar=no (панель инструментов НЕ отображать)
menubar=(меню НЕ отображать)
scrollbars=yes (отображать полосы прокрутки)
resizable=yes (разрешать пользователю менять размер окна)

Атрибуты всплывающего окна

Атрибут NN IE – Описание
alwaysLowered – Окно всегда над другими
alwaysRised – Окно всегда под другими
channelMode – Показывать содержимое на панели каналов
copyhistory – Перенести новое окно в историю из текущего
dependent – Дочернее окно закроется при закрытии родительского
directories – Показать в новом окне кнопки папок
fullscreen – Не отображать заголовок и меню
height – Размер содержимого окна в пикселях
hotkeys – Отключить клав. сокращения (кроме Quit и Sequrity Info)
innerHeight – Высота содержимого.
innerWidth – Ширина содержимого.
left – Смещение левой границы окна относительно границы экрана
location – Отображать поле адреса
menubar – Отображать меню
outerHeight – Наружная ширина окна
outerWidth – Наружная ширина окна
resizeble – Разрешать польз. менять размер окна
screenX – Смещение левой границы окна от границы экрана
screenY – Смещение верхней границы окна от границы экрана
scrollbars – Отображать полосы прокрутки
status – Отображать строку состояния
titlebar – Отображать строку меню.
toolbar – Отображать панель инструментов
top – Смещение верхней границы окна относительно границы экрана
width – Ширина содержимого.
z-lock – Новое окно фикс. под прочими окнами.

Скрипт вплывающего окна

Окно, которое рассмотрено в этой статье, можно разместить на странице и с помощью полноценного скрипта.

HTML

Javascript всплывающего окна
А вот собственно и сам скрипт всплывающего окна, который Вам нужно будет вставить сразу за ссылкой, чтобы окно заработало:

Всплывающее окно на Jquery

Этот пример скрипта я нашла на сайте habrahabr.ru и слегка его отредактировала. Данный вариант примечателен тем, что вам не придется создавать отдельное окно. Весь текст вы сможете написать прямо на той же странице, где и расположена ссылка на всплывающее окно. Вот как такое окно будет выглядеть:

Прежде всего вам необходимо будет подключить библиотеку Jquery, но перед этим желательно проверить не подключена ли она уже у вас, так как скорее все подключена. Если все таки нужно ее подключить, то между тегами <head> и </head> нужно вставить следующий код:

HTML

Также этот вариант еще примечателен тем, что если вы не будете применять CSS стили, ваше всплывающее окно превратится в спойлер! Так что, если вы хотите все-таки, чтобы у вас был не спойлер, а полноценное всплывающее окно, добавьте на сайт следующие CSS стили.

Всплывающее окно на CSS

Об этом окне я подробно написала в отдельной статье так как оно действительно заслуживает внимания. Тут приведу лишь пример:

Всплывающее окно на uCoz

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

Текст сообщения – собственно сам текст, который будет отображаться в окне (контент). Если Вы хотите вместо обыкновенного текста вставить HTML код, то в данном случае все привычные для HTML языка кавычки ” (двойные или одинарные) нужно заменить на ’ (косая с одинарной кавычкой). Хотя все скрипты найденные мною в интернете написаны без такого изменения, на моих сайтах работает только так.

Вот пример кода всплывающего окна, где вместо текстового сообщения вставлена ссылка на само вплывающее окно, то есть тут всплывающее окно создано в отдельном html файле, а в коде размещена только ссылка на него:

Ниже Вы видите предложение на подписку Новостей этого сайта (RSS) – которая оформлена с помощью всплывающего окна, и является еще одним примером использования.

stepfor.top