Создать несколько всплывающих окон на сайте - Модальные окна - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- 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>


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;  
}


Источник: ZorNet.ru

Важно!

При копировании материала указывать ссылку на источник.

- 404
- 07-Ноября-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта