Информационное сообщение как на windows by webo4ka


Информационное сообщение как на windows by webo4ka

398
8.8 из 10
Проголосовало: 13






Сегодня выкладываю простенькую подсказку на css (с использованием одной картинки - закрытия).

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

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

Установка

1) Устанавливаем HTML-код в нижнюю часть сайта:

Код

<div class="wInformation">  
  <div class="wClose"></div>  
  <div class="wTitle">Информационное сообщение...</div>  
  <div class="wText">Вданном сообщение можно вывести любой текст или любую подсказку для пользователей сайта. <br> Заходи на Webo4ka.Ru, не пожалеешь:)</div>  
  <div class="wHint"><div class="wFhint"></div></div>  
  </div>  
  </div>


2) Далее вставляем CSS-код:

Код

<style type="text/css">  
  .wInformation {  
  background: linear-gradient(to bottom, #f5f5f5 0px, #eee 100%) transparent;  
  border: 1px solid #999;  
  border-radius: 3px;  
  width: 230px;  
  padding: 10px;  
  position: fixed;  
  bottom: 20px;  
  right: 190px;  
  z-index: 2;  
  font-family: "Calibri", "Tahoma", "Helvetica", sans-serif;  
  }  

  .wTitle {  
  color:#607989;  
  font-size:14px;  
  line-height:14px;  
  }  

  .wText {  
  color:#454545;  
  font-size:12px;  
  text-align:justify;  
  }  

  .wClose {  
  background-image: url('http://www.iconsearch.ru/uploads/icons/minimal/24x24/gtk-close.png');  
  background-size: 100% 100%;  
  width: 18px;  
  height: 18px;  
  position: absolute;  
  right: 10px;  
  top: 8px;  
  opacity: 0.5;  
  }  

  .wClose:hover {  
  opacity: 1.0;  
  cursor: pointer;  
  }  

  .wHint {  
  border-left: 13px solid transparent;  
  border-top: 13px solid #999;  
  width: 0px;  
  height: 0px;  
  position: absolute;  
  right: 10px;  
  bottom: -13px;  
  z-index:2;  
  }  

  .wFhint {  
  border-left: 11px solid transparent;  
  border-top: 11px solid #eee;  
  width: 0px;  
  height: 0px;  
  position: absolute;  
  right: 1px;  
  top: -13px;  
  z-index:2;  
  }  
  </style>


3) И не забываем подключить закрытие окна, JS-код:

Код

<script>$('.wClose').click(function(){$('.wInformation').fadeOut(1000);});</script>


на этом всё...
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 2

k43
0
k43 написал: Написано 24 Июня 2016 в 22:19
Комментарий №2
windows...

BARABANTEMO
0
BARABANTEMO написал: Написано 24 Июня 2016 в 18:25
Комментарий №1
В конце один закрывающий див лишний
Код
<div class="wInformation">
<div class="wClose"></div>
<div class="wTitle">Информационное сообщение...</div>
<div class="wText">В данном сообщение можно вывести любой текст или любую подсказку для пользователей сайта. <br> Заходи на Webo4ka.Ru, не пожалеешь:)</div>

<div class="wHint"><div class="wFhint"></div></div>
</div>

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 4
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: