falbar Реализуем всплывающие сообщения без использования JavaScript

Реализуем всплывающие сообщения без использования JavaScript

25 июля 2015 5014 0

Лучший способ проинформировать посетителя вашего сайта об каких-то важных новостях или изменений это добавить блок с уведомлением, который можно будет при надобности спрятать. Сегодня мы рассмотрим один из примеров реализации данного функционала, не прибегая к JavaScript, а лишь воспользовавшись HTML и CSS3.

Реклама

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

<div class="notification-bar">
    <input id="hide" type="radio" name="bar" value="hide" />
  <input id="show" type="radio" name="bar" value="show" checked="checked" />
  <label for="hide">hide</label>
    <label for="show">show</label>
    <div class="notification-text">
     <!--
         Контент
     -->
  </div>
</div>

Как видите, при добавлении HTML мы воспользовались маленькой хитростью. Так как мы делаем уведомления, используя лишь HTML и CSS, то мы не можем отследить фактически событие клика, но CSS позволяет нам определить состояние radio кнопки - именно используя эту возможность можно легко сэмитировать нужное нам состояние. Привязав наши кнопки к тегам label, мы можем указать нужную нам текстовку. Далее останется дело за стилями, которые мы будем использовать.

Для того чтобы сообщение наше увидели все пользователи, мы его отпозиционируем в самый верх страницы и растянем на всю ширину:

.notification-bar{
   position: absolute;
 width: 100%;
    top: 0;
}

Теперь нам необходимо спрятать radio кнопки:

.notification-bar input{
  display: none;
}

Контент, который будет информировать пользователя о новостях и событиях на сайте, мы поместим в блок с классом notification-text и зададим ему стили:

.notification-text{
   background-color: #2980B9;
  padding: 15px 0;
    color: #fff;
    font-size: 14px;
    text-align: center;
 position: absolute;
 width: 100%;
    -webkit-animation: initiate 350ms ease;
 -moz-animation: initiate 350ms ease;
    -o-animation: initiate 350ms ease;
  animation: initiate 350ms ease;
}

Укажем CSS свойства для кнопок:

.notification-bar label{
   cursor: pointer;
    color: #fff;
    position: absolute;
 z-index: 5;
 display: inline-block;
  text-indent: 100%;
  white-space: nowrap;
    overflow: hidden;
}
.notification-bar label[for=hide]{
    right: 15px;
    top: 11px;
  width: 24px;
    height: 24px;
   background: url(close.png) no-repeat center center;
 -webkit-animation: initiate 350ms ease;
 -moz-animation: initiate 350ms ease;
    -o-animation: initiate 350ms ease;
  animation: initiate 350ms ease;
}
.notification-bar label[for=show]{
  width: 45px;
    height: 50px;
   border-radius: 0px 0px 3px 3px;
 right: 10px;
    background: url(show.png) no-repeat center center #2980B9;
}

У кнопок есть общие правила: как и для каждого из состояний, когда сообщение спрятано, так и в случае, когда показывается. Если замарочиться и добавить немного JavaScript, а именно куку для отслеживания состояния, то при обновлении страницы пользователю не потребуется заново его скрывать. Но здесь мы рассмотрели, что можно сделать воспользовавшиеся лишь HTML и CSS.

Реклама
Комментариев еще не оставлено
no_avatar