Параметр root

Параметр root является одним из ключевых инструментов настройки поведения модального окна в библиотеке Featherlight. Он отвечает за указание элемента DOM, внутри которого будет создано модальное окно. По умолчанию модальные окна вставляются в конец элемента <body>, но использование root позволяет изменить это поведение и вставлять окно в любой другой контейнер страницы. Это особенно важно для сложных интерфейсов, где требуется точный контроль над структурой DOM и стилями, либо при работе с вложенными контейнерами и контекстами с ограниченной областью видимости.

Основной синтаксис

Параметр root задается при инициализации Featherlight следующим образом:

$.featherlight('<div>Содержимое модального окна</div>', {
    root: '#контейнер'
});

Описание параметра:

Тип значения: строка (селектор CSS), объект DOM или jQuery-объект.
По умолчанию: $('body').
Назначение: элемент, в который будет помещено модальное окно.

Поддерживаемые значения

CSS-селектор Можно передать строку, которая будет использована как селектор для поиска элемента на странице:
```
$.featherlight('<p>Пример текста</p>', {
    root: '.modal-container'
});
```
В этом случае Featherlight найдет первый элемент с классом modal-container и вставит в него окно.

DOM-элемент Можно передавать напрямую объект DOM:

const container = document.getElementById('custom-root');
$.featherlight('<p>Пример текста</p>', {
    root: container
});

jQuery-объект Также допустимо передавать готовый jQuery-объект:

const $container = $('#custom-root');
$.featherlight('<p>Пример текста</p>', {
    root: $container
});

Применение параметра `root` с динамическим контентом

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

изоляции модальных окон внутри определённого блока;
ограничения видимости модального окна в пределах родительского контейнера;
обеспечения правильного наложения (z-index) в сложных интерфейсах.

Пример динамического использования:

$('#openModal').on('click', function() {
    $.featherlight('<div>Динамический контент</div>', {
        root: $('#dynamic-container')
    });
});

В данном случае окно будет вставлено внутрь контейнера с идентификатором dynamic-container каждый раз при нажатии на кнопку.

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

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

Если root находится внутри элемента с position: relative, это повлияет на абсолютное позиционирование модального окна.
Использование root в контейнере с overflow: hidden может обрезать содержимое модального окна.

Рекомендуется проверять и при необходимости корректировать CSS для контейнера, чтобы модальные окна отображались корректно.

Использование `root` в сочетании с другими параметрами

root часто используется вместе с параметрами persist и zIndex:

$.featherlight('<p>Сохраняемое окно</p>', {
    root: '#custom-root',
    persist: true,
    zIndex: 1050
});

persist: true — окно создается один раз и повторно используется;
zIndex — корректировка слоя перекрытия в пределах нового root.

Такой подход позволяет создавать многоуровневые модальные окна без конфликтов с другими элементами страницы.

Особенности работы с инициализацией через HTML

Featherlight поддерживает атрибут data-featherlight-root, который позволяет задать контейнер прямо в HTML-разметке:

<a href="#modalContent" data-featherlight="#modalContent" data-featherlight-root="#custom-root">Открыть окно</a>

В этом случае при клике окно автоматически будет вставлено в контейнер #custom-root. Такой подход удобен для сайтов с множеством модальных окон, где каждое окно должно находиться в своём логическом блоке.