» »

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


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

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

Стили CSS. Можно также создать в отдельном файле
Код
<style type="text/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;
  }
  #parent_popup.show, .close.show{
  display: block;
  }

  #popup {
  background: #fff;
  width: 520px;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border: 5px solid #ddd;
  position: relative;
  /*--CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
  /*--CSS3 Скругленные углы--*/
-webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  }

  .close {
  display: none;
  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);
  }

</style>


Код всплывающего окна HTML. Содержимое редактируем под себя.
Код
<div id="parent_popup" >
  <div id="popup">
<h1>«Всплывающее окно при загрузке сайта»</h1>
<p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p>
<p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" >X</a>
</div>
</div>

JS
Код
<script>
  window.addEventListener("DOMContentLoaded", function() {
  var d = document.querySelector("#parent_popup"),
  e = document.querySelector(".close");
  e.addEventListener("click", function(a) {
  a.preventDefault();
  d.classList.toggle("show");
  })
  window.setTimeout(function() {
  d.classList.toggle("show");
  window.setTimeout(function() {
  e.classList.toggle("show")
},5000) //интервал открытия окна
},5000) //пауза появления крестика на удаление
  });
</script>


Весь этот код устанавливаем в низ шаблона где хотим видеть перед /body



Смотреть ДЕМО
04.01.2016 Просмотров: 730 Комментарий: (14)

Поделиться в социальных сетях

Материал разместил

Комментарий: 14
Kosten
Kosten 04.01.2016 19:181
0
Для чего оно вообще нужно. Так что то выводить как информацию.
workman
workman 04.01.2016 19:222
0
НУ я у себя на форуме прописал окно с куками на 7 дней, и выскакивает по заданному времени и просит присоединиться к группе ВК а также поставил кнопки авторизации на форуме
workman
workman 04.01.2016 19:243
0
Типа того
Kosten
Kosten 04.01.2016 22:054
0
Так вообще не дурно смотрится, сейчас у тебя на сайте посмотрел, как понимаю, в это окно не только всякие приложение можно поставить.

workman
workman 04.01.2016 23:047
0
Ты правильно понимаешь )))все что хочешь то и пихай ...
Сопрано
Сопрано 04.01.2016 22:085
0
Так оно и сделано отдельно от основного, чтоб можно что то поставить, только не понятен скрипт JS он всегда идет с основными кодами вместе, но кроме стилей.
FeStemBer
FeStemBer 04.01.2016 22:426
0
Вот кто не знает а просто слышал о таком окне, вот на нем можно что вам нужно вывести. Вот видим, что пользователь посчитал, что ему нужно показать подписчиков и тем временем он и предлагает подписаться, вы также можете сделать или что то другое.
workman
workman 04.01.2016 23:068
0
Ребята. То что стоит у меня,этот так работать скрипт не будет. У меня немного другое и куки прописаны, чтобы для пользователя один раз в 7 дней показывало. А тут просто болванка
workman
workman 04.01.2016 23:109
0
Вот еще есть одно окно, которое нужно открывать кликнув по ссылке демо
Kosten
Kosten 04.01.2016 23:1810
0
Так это пропиши на форуме. Оно мне кажется легче к пониманию.
workman
workman 04.01.2016 23:1911
0
Возьми сам с исходника и поставь ... Я просто параллельно еще один скрипт прописываю
nikolla76
nikolla76 05.01.2016 00:0812
0
С такими окнами не работал, но вижу у них будущее жольшое, что то можно и себе сделать, хотяне сильно что понял.
Kosten
Kosten 05.01.2016 00:4614
0
nikolla76, веришь, сам не понял, но пока не поставлю то до конца не разберусь, что куда прописывать, но 2 кода понятно, третий, как без хозный для меня, не знаю куда привинтить.
csretven
csretven 05.01.2016 00:2713
0
Но они же разнве бывают, или толькоодин светлый дизайн. Просто раньше вообще не слышал, думал простопеределаный аякс окно, а здесь все так серьезно.
avatar