» »

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

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

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

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

1.

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

2.

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

Шаг 1. HTML

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

Код
<div id="par_popup">
  <div id="pop">
  <p>ZORNET.RU</p>
  <pre>Да<a class="clos" onclick="document.getElementById('par_popup').style.display='none';">Нет</a></pre>
  </div>
</div>


Шаг 2. CSS
Стилистика, что решаете как выглядеть должно.

Код
#par_popup {
  display: none;
  position: fixed;
  z-index: 99999;
  bottom: 0;
  left: 15px;
}

pre {
  text-align: center;
}

#pop {
  background: #feea59;
  width: 140px;
  margin: 50% auto;
  padding: 5px 20px;
  border: 1px solid #000;
  border-radius: 5px;
}

#pop p {
  font-size: 14px;
  text-align: center;
}

.clos {
  cursor: pointer;
  text-decoration: none;
}

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

Код
<script language="JavaScript">
var delay_popup = 5000;
setTimeout("document.getElementById('par_popup').style.display='block'", delay_popup);
</script>

Чтоб понять конкретнее, то переходим на демонстрацию, где в реале увидите.

Автор: workman
14.10.2017 Просмотров: 299 Комментарий: (0)

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

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

Комментарий: 0
avatar