257

Делаем всплывающую панель на javascript

Видеоурок

В это статье мы создадим всплывающую панель на javascript.
Для хранения состояния будет использовать localStorage.

Ссылка на codepen

Зачем нам что-то хранить? Пару дней назад на моем сайте происходил редизайн. Я хотел уведомить пользователя о том, чтобы он не пугался поехавшей верстки и просто очистил кеш нажатием ctrl+f5.

А если пользователь зайдет 10 раз? Каждый раз показывать ему это, зачем? Он уже знает. Для этого мы будем записывать в хранилище то, что пользователь уже просмотрел наше сообщение. В следующий раз оно уже не будет показываться.

html

Первым делом — html. Мы создаем фиксированную панель внизу экрана с текстом и кнопками. Так же добавляем класс для скрытия панели.


<div class="notification js-notification hidden">
  <div class="container">
     <div class="text">
       В данный момент происходит замена дизайна сайта. Если у вас что-то выглядит
       криво – нажмите ctrl+F5 или Cmd+F5(Mac)
     </div>
     <button class="btn"> Окей, понял</button>
  </div>
</div>

.js-notification мы добавляем для того, чтобы не использовать для javascript те классы, на которых висит оформление. Мы можем забыть об этом и поменять классы — интерактив сломается. Видя приставку js-, мы не будем менять класс зная, что на нем функционал в js.

.hidden мы добавили сразу же. Дело в том, что пока мы не поняли, смотрел он уже наше сообщение или нет, панель должна быть скрыта, чтобы она не показывалось в самом начале, пока javascript просматривает хранилище. Панель покажется быстрее, чем сообразит javascript.

css

.container {
   max-width: 1170px;
   width: 100%;
   margin: 0 auto;
   padding: 0 25px;
   box-sizing: border-box;
}

.notification .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.notification {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 200;
   background-color: #FFC107;
   padding: 30px 0; 
}

.notification.hidden {
   display: none; 
}

.notification-text {
   max-width: 80%;
}

.notification .btn {
   margin-left: auto;
   padding: 10px 15px; 
   background-color: #444;
   border: none;
   border-radius: 3px;
   color: #fff;
   cursor: pointer;
}

По css ничего сложного. Думаю многие поймут и справятся. Если будут вопросы — пишите в комментариях или в личку.

javascript

Часто, чтобы написать какой-то код, нужно проговорить его вслух:


«Пользователь заходит на сайт, проверить есть ли в хранилище запись, если ее там нет — добавить класс с панели, если она там есть, ничего не делать. При клике на кнопку, добавлять запись в хранилище и добавлять класс, скрывающий панель.»

Вот и готовая схема кода. Мой руководитель, занимаясь с ученицей, писал на листке такие конструкции:

Если (записи в хранилище нет) {
  удалить класс у блока
}

клик по кнопке ({
  добавить запись в хранилище
  добавить класс, скрывающий панель
})

Когда сложная ситуация, помогает разобраться.

Я немного отвлекся, приступим к js:

// Переменные для панели и кнопки
var panel = document.querySelector('.js-notification'),
    panelButton = panel.querySelector('.btn');

Заметьте, переменная panelButton написана по-другому. Она начинается не с document, а с panel (первая переменная), это означает я ищу этот элемент не во всем документе, а только в панели. То есть буду искать ее среди потомков элемента с классом «.js-notification».

Напишем проверку хранилища. Я буду хранить наше сообщение под именем «cookie-message»:

именем «cookie-message»:

if (localStorage['cookie-message'] == undefined) {
  panel.classList.remove('hidden');
}

Если в хранилище нет записи — добавляем класс hidden

И последнее — клик по кнопке:

panelButton.addEventListener('click', function() {
  localStorage['cookie-message'] = true;
  panel.classList.add('hidden');
});

Добавляем событие клика. После клика записываем значение «cookie-message» в хранилище на true и добавляем панели класс, который ее скроет.

Мы установили true, в итоге в следующее посещение проверка на undefined в предыдущем блоке даст false и удаление скрывающего класса не сработает.

Все вместе:

var panel = document.querySelector('.js-notification'),
    panelButton = panel.querySelector('.btn');

   if (localStorage['cookie-message'] == undefined) {
    panel.classList.remove('hidden');
   }
   
   panelButton.addEventListener('click', function() {
      localStorage['cookie-message'] = true;
      panel.classList.add('hidden');
   });
Поделиться
Отправить

Комментарии