вРазные полезности

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

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

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

Стили 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



Смотреть ДЕМО

источник: zornet.ru

Похожие посты