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

Плюсануть
Поделиться
Класснуть

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

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

Потребовалось мне сделать подобное окно на простом html-сайте. Если бы потребовалось на WordPress, то совсем бы не задумывался над решением задачи, банально бы поставил плагин, таких уйма.

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

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

Итак, для начала поставьте данный код сразу после тега :

<div id="parent_popup">
<div id="popup">
Тут вставляем необходимый html-код
<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>
</div>
</div>
<script type="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>

В переменной delay_popup указываем количество миллисекунд до появления окна (в моём случае это 5000 миллисекунд = 5 секунд).

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

#parent_popup{
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#popup{
  background: #fff;
  width: 520px;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border: 10px solid #ddd;
  position: relative;
  -webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
   border-radius: 15px;
}
.close{
  background-color: rgba(0, 0, 0, 0.8);
  border: 2px solid #ccc;
  height: 24px;
  line-height: 24px;
  position: absolute;
  right: -24px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
  top: -24px;
  width: 24px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
   box-shadow: 1px 1px 3px #000;
}
.close:hover{
  background-color: rgba(0, 122, 200, 0.8);
}

Кстати, если у вас нет отдельного файла со стилями - можно и самом html-файле прописать всё, используя данный код:

<style type="text/css"></style>

Вот и всё, можно пользоваться.

Да, тут нет запоминания по кукам, так что не везде подойдёт такой скрипт. Однако мне нужно было ставить на одностраничник, поэтому разницы нет никакой.

Ну а результат действительно очень крутой. Я ставил виджет ВКонтакте - прирост реальных подписчиков очень быстрый!

После того, как вы подняли с колен свою группу и стали успешным SMM-манагером, можно и в пейнтбол в Москве поиграть. Хорошая идея же, не так ли?

Последнее изменение записи: 03.02.2018 | Рубрика: Работа | Метки: ,
Плюсануть
Поделиться
Класснуть