ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Всплывающее окно при входе на сайт на CSS

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

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

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

1.

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

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

Шаг 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;
}

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

Код

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

Автор: workman

14 Октября 2017 Просмотров: 1911 Комментариев: (0)

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

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

Kosten

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