Кастомные модальные окна

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

Настройка кастомного шаблона

Shepherd использует библиотеку Tether.js для позиционирования подсказок, а модальные окна можно кастомизировать через объект modal. Чтобы создать кастомное модальное окно, необходимо определить следующие параметры:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows custom-modal',
    scrollTo: true,
    modalOverlayOpeningPadding: 10,
    modal: true
  }
});

Ключевые параметры:

  • classes – CSS-классы, определяющие внешний вид окна.
  • scrollTo – обеспечивает прокрутку к целевому элементу при открытии шага.
  • modalOverlayOpeningPadding – отступ от краёв окна при модальном наложении.
  • modal – включение модального режима, при котором фон страницы затемняется и клики по нему блокируются.

Индивидуальные стили для каждого шага

Каждый шаг может иметь уникальное оформление. Для этого используется параметр classes на уровне шага:

tour.addStep({
  id: 'step-1',
  text: 'Это первый шаг с индивидуальным модальным стилем.',
  attachTo: { element: '.target-element', on: 'bottom' },
  classes: 'custom-step-style',
  modal: true
});

Это позволяет задавать различную цветовую гамму, размеры, тени и анимации для каждого модального окна.

Кастомизация кнопок и действий

Shepherd.js позволяет не ограничиваться стандартными кнопками «Next» и «Back». Можно создавать свои элементы управления и обрабатывать события:

tour.addStep({
  id: 'step-2',
  text: 'Шаг с кастомными кнопками.',
  attachTo: { element: '.another-element', on: 'top' },
  buttons: [
    {
      text: 'Закрыть',
      action: tour.cancel,
      classes: 'btn-close'
    },
    {
      text: 'Следующий',
      action: tour.next,
      classes: 'btn-next'
    }
  ],
  modal: true
});

Особое внимание следует уделять классам кнопок, чтобы визуально выделять критические действия, например, закрытие модального окна.

Пользовательский контент

Модальное окно в Shepherd.js поддерживает любой HTML-контент, включая формы, изображения и интерактивные элементы:

tour.addStep({
  id: 'step-3',
  text: '<h3>Форма обратной связи</h3><input type="text" placeholder="Ваш email">',
  attachTo: { element: '.form-container', on: 'right' },
  modal: true
});

HTML-контент может содержать скрипты и стили, что позволяет создавать сложные интерактивные модальные интерфейсы.

Управление поведением модального окна

Основные методы Shepherd.js позволяют полностью контролировать состояние модального окна:

  • tour.next() – переход к следующему шагу.
  • tour.back() – возврат к предыдущему шагу.
  • tour.cancel() – закрытие всей последовательности.
  • tour.show() – отображение текущего шага.
  • tour.hide() – скрытие текущего шага без отмены тура.

Для модальных окон особенно важно использовать cancel или complete при кликах вне области окна, если это предусмотрено логикой интерфейса:

tour.on('cancel', () => {
  console.log('Модальное окно закрыто пользователем');
});

Анимации и переходы

Кастомные модальные окна часто требуют плавных анимаций при открытии и закрытии. Shepherd.js поддерживает добавление CSS-анимаций через классы:

.custom-modal {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.3s ease-in-out;
}

.shepherd-element.shepherd-open.custom-modal {
  opacity: 1;
  transform: scale(1);
}

Использование CSS-переходов позволяет создавать эффекты плавного появления и исчезновения модальных окон без дополнительного JavaScript.

Работа с динамическими элементами

Если целевой элемент появляется на странице динамически, можно использовать when или отложенный вызов:

tour.addStep({
  id: 'dynamic-step',
  text: 'Шаг для динамически созданного элемента.',
  attachTo: { element: '.dynamic-element', on: 'bottom' },
  beforeShowPromise: () => {
    return new Promise(resolve => {
      const checkExist = setInterval(() => {
        if (document.querySelector('.dynamic-element')) {
          clearInterval(checkExist);
          resolve();
        }
      }, 100);
    });
  },
  modal: true
});

Это гарантирует корректное позиционирование модального окна даже при асинхронной загрузке DOM.

Совмещение с другими библиотеками

Кастомные модальные окна Shepherd.js можно интегрировать с фреймворками и библиотеками, такими как React, Vue или jQuery, передавая элементы через рефы или селекторы:

tour.addStep({
  id: 'react-step',
  text: 'Модальное окно внутри React-компонента.',
  attachTo: { element: '#react-root', on: 'left' },
  modal: true
});

Это обеспечивает единообразное поведение модальных подсказок в сложных SPA-приложениях.

Кастомные модальные окна в Shepherd.js предоставляют полный контроль над визуальным представлением, поведением и взаимодействием. Использование параметров classes, modal, buttons, HTML-контента и методов управления позволяет создавать сложные, интерактивные и динамичные интерфейсы, соответствующие любым требованиям проекта.

Оглавление