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

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

Сначала покажу, как работает:

Весь код для копирования в конце статьи.

Ссылка на codepen

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

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

html

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

<div class="notification js-notification hidden">
  <div class="container">
     <div class="notification-text">
	 Мы используем куки-файлы. Продолжая использовать наш сайт, вы соглашаетесь с этим.
     </div>
     <button class="notification-btn js-notification-btn">OK</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: 30px;
    right: 0;
    z-index: 200;
    background-color: var(--purple);
    color: #fff;
    width: 100%;
    max-width: 600px;  
    border-radius: 0 32px 0 32px;
    padding: 0 20px;  
}
.notification.hidden {
    display: none; 
}
.notification-text {
    max-width: 70%;
}
.notification-btn {
    padding: 10px 15px; 
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    background-color: transparent;
    font-size: 50px;
    margin-left: auto;
}

По 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');
   });

Итоговый код

В итоговый код я добавил строки анимации появления/скрытия. Я объясню их в статье позже.

html

<div class="notification js-notification hidden">
  <div class="container">
     <div class="notification-text">
	 Мы используем куки-файлы. Продолжая использовать наш сайт, вы соглашаетесь с этим.
     </div>
     <button class="notification-btn js-notification-btn">OK</button>
  </div> 
</div>

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: 30px;
    right: 0;
    z-index: 200;
    background-color: var(--purple);
    color: #fff;
    width: 100%;
    max-width: 600px;  
    border-radius: 0 32px 0 32px;
    padding: 0 20px;  
    transition: .3s all;
    opacity: 1;
    transform: translateY(0)    
}
.notification.hidden {
    opacity: 0;
    z-index: -1;
    transform: translateY(25px)
}
.notification-text {
    max-width: 70%;
}
.notification-btn {
    padding: 10px 15px; 
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    background-color: transparent;
    font-size: 50px;
    margin-left: auto;
}

Javascript

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

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

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