Параметр otherClose

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

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

Параметр otherClose позволяет указать селекторы элементов вне модального окна, взаимодействие с которыми вызывает закрытие окна. Это расширяет стандартное поведение закрытия по кнопке или по клику на фон (overlay) и дает гибкость в управлении пользовательским интерфейсом.

По умолчанию Featherlight закрывается:

  • при клике на фон (overlay);
  • при нажатии кнопки с классом featherlight-close.

С использованием otherClose можно добавить любые дополнительные элементы, например:

  • кнопки вне модального окна;
  • ссылки, которые находятся в списках;
  • элементы интерфейса, отвечающие за отмену действия.

Формат использования

otherClose принимает значение CSS-селектора или массив селекторов. Пример:

$.featherlight('#modal-content', {
    otherClose: '.external-close-button'
});

В этом примере любое нажатие на элемент с классом .external-close-button вызовет закрытие модального окна.

Для указания нескольких элементов используется массив:

$.featherlight('#modal-content', {
    otherClose: ['.external-close-button', '#cancel-link', '.overlay-link']
});

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

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

  • closeOnClick – управляет закрытием по клику на фон. Если установлен false, модальное окно не закроется при клике на overlay, но otherClose по-прежнему работает.
  • beforeClose – коллбэк, вызываемый перед закрытием. Даже при использовании otherClose, можно выполнить дополнительные проверки или действия перед фактическим закрытием:
$.featherlight('#modal-content', {
    otherClose: '.external-close-button',
    beforeClose: function(event){
        console.log('Попытка закрытия через otherClose');
        return true; // true — разрешает закрытие, false — отменяет
    }
});

Особенности работы

  1. Делегирование событий: Featherlight использует делегирование для элементов, указанных в otherClose, что позволяет добавлять новые элементы динамически без необходимости перепривязывать обработчики.
  2. Приоритетность: Если клик происходит одновременно на элементе с otherClose и на кнопке закрытия модального окна, срабатывают оба события, но фактическое закрытие выполняется один раз.
  3. Множественные селекторы: Использование массива селекторов повышает гибкость и уменьшает необходимость писать дополнительные обработчики jQuery отдельно.
  4. Совместимость с динамическим контентом: Если контент внутри страницы подгружается через AJAX, селекторы, указанные в otherClose, будут работать для новых элементов благодаря делегированию событий.

Практические примеры

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

<ul>
    <li><a href="#" class="close-modal">Закрыть окно</a></li>
    <li><a href="#">Другая ссылка</a></li>
</ul>

<div id="modal-content">
    <p>Содержимое окна</p>
</div>

<script>
    $.featherlight('#modal-content', {
        otherClose: '.close-modal'
    });
</script>

Пример 2: Закрытие через кнопку и overlay одновременно

$.featherlight('#modal-content', {
    closeOnClick: 'background', // закрытие по клику на фон
    otherClose: ['.btn-cancel', '.btn-dismiss'] // дополнительные кнопки
});

В этом случае окно закрывается как по клику на фон, так и по нажатию на кнопки .btn-cancel и .btn-dismiss.

Ограничения и рекомендации

  • Только для элементов вне модального окна: Если элемент находится внутри окна, лучше использовать стандартные методы закрытия (featherlight-close).
  • Уникальные селекторы: Рекомендуется использовать селекторы, которые точно идентифицируют элементы для предотвращения случайного закрытия.
  • Не переопределяет стандартное закрытие: otherClose добавляет дополнительные пути закрытия, но не заменяет существующие.

Параметр otherClose является мощным инструментом для кастомизации поведения модальных окон, позволяя интегрировать их с любыми элементами интерфейса и обеспечивая удобство взаимодействия с пользователем.

Оглавление