Множественные экземпляры

Featherlight — это лёгкая библиотека для создания модальных окон на основе jQuery, отличающаяся минимализмом и высокой кастомизируемостью. Одной из мощных возможностей является работа с множественными экземплярами, что позволяет одновременно управлять несколькими модальными окнами, создавать вложенные окна и гибко контролировать их поведение.

Создание и инициализация нескольких экземпляров

Каждый экземпляр Featherlight создаётся при вызове метода $.featherlight или через привязку к элементу с помощью jQuery:

var instance1 = $.featherlight('<p>Первое окно</p>');
var instance2 = $.featherlight('<p>Второе окно</p>');

Каждый вызов возвращает объект экземпляра, который содержит свойства и методы для управления конкретным окном. Среди ключевых свойств:

instance.$content — jQuery-объект с содержимым окна.
instance.$current — текущий DOM-элемент окна.
instance.options — набор настроек экземпляра.

Методы экземпляра позволяют управлять окном независимо:

instance.open() — открывает окно.
instance.close() — закрывает окно.
instance.toggle() — переключает состояние окна.

Использование отдельных экземпляров позволяет одновременно держать несколько открытых окон и управлять ими независимо.

Конфигурация для каждого экземпляра

Каждое окно может иметь собственные параметры, которые задаются при инициализации:

var instance = $.featherlight('<p>Окно с настройками</p>', {
    closeOnClick: 'background', // закрытие при клике на фон
    closeOnEsc: true,            // закрытие по ESC
    variant: 'custom-style'      // дополнительный CSS-класс
});

Важно: Параметры экземпляра не влияют на другие окна. Это позволяет создавать окна с разными эффектами, размерами и поведением в рамках одного проекта.

Вложенные окна

Featherlight поддерживает открытие вложенных окон:

var first = $.featherlight('<p>Первое окно <button id="openSecond">Открыть второе</button></p>');

$('#openSecond').on('click', function() {
    $.featherlight('<p>Второе окно</p>');
});

Каждое новое окно создаётся как отдельный экземпляр и может быть закрыто независимо. При этом Featherlight автоматически управляет фокусом, предотвращая конфликты между окнами.

Особенности вложенных окон:

Фон первого окна затемняется автоматически.
Закрытие верхнего окна возвращает фокус к предыдущему.
Вложенные окна могут использовать собственные стили и размеры, не влияя на родительское окно.

Управление множеством окон через массивы

Для более сложных сценариев удобно хранить экземпляры в массиве:

var windows = [];

windows.push($.featherlight('<p>Окно 1</p>'));
windows.push($.featherlight('<p>Окно 2</p>'));
windows.push($.featherlight('<p>Окно 3</p>'));

// Закрытие всех окон
windows.forEach(function(win) {
    win.close();
});

Такой подход полезен при динамическом создании контента, когда количество модальных окон заранее неизвестно.

События и обратные вызовы для каждого экземпляра

Каждый экземпляр Featherlight поддерживает собственные события:

beforeOpen — вызывается перед открытием окна.
afterOpen — после открытия.
beforeClose — перед закрытием.
afterClose — после закрытия.

Пример с кастомным поведением для конкретного окна:

$.featherlight('<p>Окно с событиями</p>', {
    beforeOpen: function() {
        console.log('Окно готовится к открытию');
    },
    afterClose: function() {
        console.log('Окно закрыто');
    }
});

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

Уникальные варианты стилей для разных экземпляров

Свойство variant позволяет задавать индивидуальные CSS-классы:

$.featherlight('<p>Красное окно</p>', { variant: 'red-theme' });
$.featherlight('<p>Синее окно</p>', { variant: 'blue-theme' });

В результате одно окно может быть красным, другое — синим, при этом структура и функциональность остаются стандартными.