Механизм modal overlay

В Shepherd.js modal overlay представляет собой инструмент, который позволяет затемнять весь экран кроме области, на которую указывает текущий шаг тура. Это создаёт эффект фокусировки на конкретном элементе интерфейса и повышает удобство интерактивных инструкций.

Подключение и базовая инициализация:

import Shepherd from 'shepherd.js';
import 'shepherd.js/dist/css/shepherd.css';

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true,
    modalOverlayOpeningPadding: 10 // отступ вокруг выделяемого элемента
  },
  useModalOverlay: true // включение modal overlay
});

Здесь ключевой момент — параметр useModalOverlay: true. Он активирует затемнение фона. Параметр modalOverlayOpeningPadding задаёт отступ между границей выделяемого элемента и затемнённой областью, что позволяет избежать “слипания” подсказки с краями элемента.

Создание шагов с активацией overlay

Каждый шаг, который должен использовать modal overlay, можно настроить с помощью свойства highlightClass или attachTo.

tour.addStep({
  id: 'step-1',
  text: 'Это первый шаг тура.',
  attachTo: {
    element: '#buttonStart',
    on: 'bottom'
  },
  highlightClass: 'shepherd-highlight-custom', 
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});
  • attachTo — указывает элемент, на котором будет фокус.
  • highlightClass — позволяет задать кастомный стиль для подсветки элемента, например с рамкой или тенью.

Важно: если highlightClass не указан, Shepherd автоматически создаёт базовый highlight.

Настройка внешнего вида overlay

Modal overlay в Shepherd.js можно кастомизировать с помощью CSS. Стандартный слой имеет класс .shepherd-modal-overlay-container. Пример кастомизации:

.shepherd-modal-overlay-container {
  background-color: rgba(0, 0, 0, 0.6); /* прозрачный тёмный фон */
  transition: background-color 0.3s ease;
  z-index: 1000;
}

.shepherd-highlight-custom {
  box-shadow: 0 0 0 5px rgba(255, 255, 0, 0.7); /* желтая подсветка */
  border-radius: 6px;
}
  • background-color регулирует степень затемнения.
  • box-shadow и border-radius обеспечивают акцент на элементе, улучшая визуальное выделение.

Динамическое управление overlay

Shepherd позволяет изменять свойства overlay на лету. Например, можно программно скрыть overlay для определённого шага:

tour.addStep({
  id: 'step-2',
  text: 'Шаг без overlay',
  useModalOverlay: false,
  attachTo: {
    element: '#infoPanel',
    on: 'right'
  },
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

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

Управление событиями overlay

Modal overlay поддерживает события, которые позволяют реагировать на его открытие или закрытие. Основные события:

tour.on('show', (step) => {
  if (step.options.useModalOverlay) {
    console.log('Overlay активен для этого шага');
  }
});

tour.on('hide', (step) => {
  console.log('Overlay скрыт');
});

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

Особенности работы с позиционированием

Overlay автоматически подстраивается под attachTo элемент. Однако, при сложной верстке, например при fixed или sticky элементах, рекомендуется использовать:

  • modalOverlayOpeningPadding для увеличения отступа
  • scrollTo: true для корректного прокручивания страницы к элементу
const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: { beh * avior: 'smooth', block: 'center' },
    modalOverlayOpeningPadding: 15
  },
  useModalOverlay: true
});

Это предотвращает сдвиг подсказки за пределы видимой области экрана.

Советы по производительности

  • Не создавайте overlay на каждом элементе с анимацией или видео, это может замедлить рендер.
  • Кешируйте стили подсветки через классы вместо инлайн-стилей.
  • При большом количестве шагов используйте отключение overlay на вспомогательных шагах для минимизации нагрузки.

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

Оглавление