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

Создать несколько всплывающих окон на сайте

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

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

HTML

Код

<a href="#win1" rel="nofollow">Ссылка вызова №1</a>
<div class="popup animated" id="win1">
  Тут содержимое окна №1
  <a rel="nofollow" class="close" href="#close"></a>
</div>

<a href="#win2" rel="nofollow">Ссылка вызова №2</a>
<div class="popup animated" id="win2">
  Это особенно справедливо в игровых тестах (как сообщает Anandtech's Bench), где 7700K и Core i7-4790K были достаточно хорошо сопоставлены. Игры, в общем, не очень сильно реагируют на изменения частоты.
  <a rel="nofollow" class="close" href="#close"></a>
</div>

<a href="#win3" rel="nofollow">Ссылка вызова №3</a>
<div class="popup animated" id="win3">
  Тут содержимое окна №3
  <a rel="nofollow" class="close" href="#close"></a>
</div>

CSS

Код

.popup {
  bottom: -1500%;
  right: 0;
  left: 50%;
  font-size: 14px;
  z-index: 999;
  width: 85%;
  min-width: 200px;
  max-width: 400px;
  position: fixed;
  padding: 55px;
  border: 1px solid #383838;
  background: #fefefe;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  font: 14px/18px 'Tahoma', Arial, sans-serif;
  -webkit-transform: translate(-50%, 1500%);
  -ms-transform: translate(-50%, 1500%);
  -o-transform: translate(-50%, 1500%);
  transform: translate(-50%, 1500%);
  transition-duration: 1s;
  transition-delay: 0s, 1s;
}

.popup:target {
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  bottom: 0;
}

.close {
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  position: absolute;
  padding: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background-color: rgba(233, 233, 233, 0.8);
  text-align: center;
  text-decoration: none;
  font: 16px/21px 'Tahoma', Arial, sans-serif;
  font-weight: 700;
  border: 1px solid #ada9a9;
}

.close::before {
  color: rgba(245, 5, 5, 0.9);
  content: "X";
  text-shadow: 0 -1px rgba(0, 0, 0, .9);
  font-size: 11px;
}

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

Спасибо workman за подкинутую идею.

03 Ноября 2017 Просмотров: 3031 Комментариев: (0)

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

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

Kosten

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