Работа с модальными окнами

Библиотека Isotope позволяет создавать динамические сетки и управлять их расположением на странице с фильтрацией, сортировкой и анимацией. Для работы с модальными окнами она применяется в связке с визуальными элементами сетки, позволяя пользователю просматривать подробную информацию о каждом элементе без перезагрузки страницы. Ключевым моментом является правильная структура HTML и использование дата-атрибутов для хранения данных, которые будут отображаться в модальном окне.

Структура HTML элементов

Каждый элемент сетки Isotope представляет собой контейнер с классом, например, .grid-item. Для интеграции с модальным окном рекомендуется использовать следующие атрибуты:

<div class="grid-item" data-title="Заголовок" data-description="Описание элемента">
  <img src="image.jpg" alt="Превью">
</div>
  • data-title — заголовок модального окна.
  • data-description — текст, который будет отображаться внутри модального окна.
  • img — визуальное превью элемента.

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

Инициализация Isotope

Для создания сетки необходимо подключить библиотеку Isotope и вызвать её на контейнере с элементами:

const grid = document.querySelector('.grid');

const iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  transitionDuration: '0.6s'
});
  • itemSelector — класс элементов сетки.
  • layoutMode — режим расположения (fitRows, masonry и другие).
  • transitionDuration — время анимации при перестройке сетки.

Обработка кликов для модального окна

Для открытия модального окна необходимо добавить обработчик событий на каждый элемент сетки:

grid.addEventListener('click', function(event) {
  const item = event.target.closest('.grid-item');
  if (!item) return;

  const title = item.getAttribute('data-title');
  const description = item.getAttribute('data-description');

  openModal(title, description);
});
  • closest(‘.grid-item’) позволяет определить, какой именно элемент был нажат, даже если клик произошел на вложенном элементе (например, изображении).
  • openModal(title, description) — функция, которая создаёт и отображает модальное окно с переданными данными.

Создание модального окна

Модальное окно может быть реализовано через динамическое создание элементов:

function openModal(title, description) {
  const modal = document.createElement('div');
  modal.classList.add('modal');

  modal.innerHTML = `
    <div class="modal-content">
      <span class="modal-close">&times;</span>
      <h2>${title}</h2>
      <p>${description}</p>
    </div>
  `;

  document.body.appendChild(modal);

  modal.querySelector('.modal-close').addEventListener('click', () => {
    closeModal(modal);
  });

  modal.addEventListener('click', (e) => {
    if (e.target === modal) closeModal(modal);
  });
}

function closeModal(modal) {
  modal.remove();
}
  • .modal — контейнер всего окна с прозрачным фоном.
  • .modal-content — блок с содержимым модального окна.
  • .modal-close — кнопка закрытия.
  • Клик по фону закрывает окно, обеспечивая естественное взаимодействие с пользователем.

Адаптация к фильтрации Isotope

При фильтрации элементов сетки с помощью Isotope модальные окна должны корректно работать с оставшимися элементами. Фильтрация реализуется через кнопки или ссылки:

const filters = document.querySelectorAll('.filter-button');

filters.forEach(button => {
  button.addEventListener('click', () => {
    const filterValue = button.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });
  });
});
  • data-filter — CSS-селектор для фильтрации элементов.
  • iso.arrange({ filter: filterValue }) перестраивает сетку с применением фильтра.

После фильтрации события клика остаются привязанными к элементам через делегирование (grid.addEventListener), что обеспечивает корректную работу модальных окон даже с динамически скрытыми и показанными элементами.

Добавление анимации и плавности

Для улучшения визуального восприятия модальные окна могут открываться с эффектом масштабирования или прозрачности. Это можно реализовать через CSS:

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.modal.show {
  opacity: 1;
  transform: scale(1);
}

И при открытии модального окна добавляется класс .show:

setTimeout(() => modal.classList.add('show'), 10);
  • transition обеспечивает плавное появление.
  • transform: scale создаёт эффект увеличения.
  • Задержка через setTimeout гарантирует анимацию после вставки элемента в DOM.

Поддержка динамического контента

Для сеток с большим количеством элементов часто данные загружаются через AJAX. В таком случае важно повторно инициализировать события модальных окон после добавления новых элементов:

function refreshModalEvents() {
  grid.querySelectorAll('.grid-item').forEach(item => {
    item.addEventListener('click', () => {
      const title = item.getAttribute('data-title');
      const description = item.getAttribute('data-description');
      openModal(title, description);
    });
  });
}

При динамической подгрузке элементов вызывается refreshModalEvents() для корректного функционирования модальных окон.

Хотите, я могу написать продолжение с углублёнными практическими примерами интеграции Isotope с библиотекой анимаций и AJAX для модальных окон? Это будет прямо как полноценный учебный блок.

Оглавление