Параметр persist

Библиотека Featherlight предоставляет легковесный способ создания модальных окон и лайтбоксов на сайте. Одним из важных параметров конфигурации является persist. Этот параметр управляет тем, как содержимое модального окна сохраняется или пересоздаётся при его закрытии и повторном открытии. Правильное понимание и использование persist позволяет оптимизировать работу с динамическим контентом и улучшить пользовательский опыт.

Назначение параметра persist

persist отвечает за поведение DOM-элементов внутри модального окна после его закрытия:

  • Если persist: false (значение по умолчанию), содержимое окна удаляется из DOM при закрытии. Это означает, что при каждом новом открытии лайтбокса создаётся новый элемент, что удобно для динамического контента, загружаемого через AJAX или вставляемого с помощью шаблонов.

  • Если persist: true, содержимое сохраняется в DOM, остаётся на месте и повторно используется при следующем открытии. Такой подход экономит ресурсы и предотвращает повторную инициализацию элементов, особенно если лайтбокс содержит интерактивные компоненты, например, формы, слайдеры или видео.

Синтаксис и использование

Параметр persist можно передать при инициализации Featherlight:

// Инициализация с persist = true
$.featherlight('#modal-content', {
    persist: true
});

// Инициализация с persist = false
$.featherlight('#modal-content', {
    persist: false
});

persist может использоваться как при инициализации через JavaScript, так и через атрибуты HTML:

<a href="#modal-content" data-featherlight="inline" data-featherlight-persist="true">Открыть окно</a>

Поведение при persist: true

  • Содержимое не удаляется из DOM после закрытия.

  • Возможность сохранять состояние элементов внутри лайтбокса. Например:

    • Введённый текст в формах.
    • Выбранные элементы в списках.
    • Состояние интерактивных виджетов (например, галерей или слайдеров).

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

Пример:

$('#openModal').featherlight('#modal-content', {
    persist: true
});

// При закрытии и повторном открытии текст в input сохраняется

Поведение при persist: false

  • Содержимое удаляется из DOM при закрытии окна.

  • При следующем открытии элемент создаётся заново, что подходит для динамического контента:

    • AJAX-запросов.
    • Генерируемых списков.
    • Временных сообщений.

Пример:

$('#openModal').featherlight(function(){
    return $.ajax({
        url: '/dynamic-content.html',
        method: 'GET'
    });
}, {
    persist: false
});

В этом случае каждый вызов делает новый AJAX-запрос и создаёт свежий элемент, а старый автоматически удаляется.

Взаимодействие с другими параметрами

  • targetAttr: если контент берётся из атрибута, persist: true сохранит его в DOM после первого открытия.
  • afterClose: при persist: false можно использовать этот хук для очистки дополнительных данных или состояния.
  • beforeOpen / afterOpen: при persist: true эти хуки часто используются для обновления содержимого, не уничтожая сам элемент.
$.featherlight('#modal-content', {
    persist: true,
    afterOpen: function(event){
        console.log('Модальное окно открыто, состояние сохранено');
    }
});

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

  • Для статического контента: persist: true экономит ресурсы и ускоряет работу.
  • Для динамического контента: persist: false гарантирует актуальность данных и предотвращает накопление устаревших элементов в DOM.
  • Для форм и интерактивных виджетов внутри лайтбокса обычно используют persist: true, чтобы не терять введённые данные при случайном закрытии.
  • Если в лайтбоксе используется AJAX-загрузка, рекомендуется комбинировать persist: false с кэшированием данных, чтобы избежать лишних запросов.

Параметр persist является ключевым инструментом для контроля жизненного цикла элементов в Featherlight. Его грамотное использование позволяет создавать как лёгкие одноразовые модальные окна, так и интерактивные компоненты с сохранением состояния, оптимизируя производительность и упрощая работу с динамическим контентом.

Оглавление