Проверка корректности установки

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

Подключение файлов

Для работы Featherlight требуется подключение jQuery и собственных файлов библиотеки:

<!-- Подключение jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Подключение CSS Featherlight -->
<link href="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" rel="stylesheet"/>

<!-- Подключение JS Featherlight -->
<script src="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js"></script>

Важно: порядок подключения критичен. Сначала jQuery, затем CSS и JS Featherlight. Любое нарушение порядка приведет к ошибкам и невозможности открытия модального окна.

Проверка подключения с помощью консоли

Для проверки корректной загрузки можно использовать следующие команды в консоли браузера:

// Проверка jQuery
console.log(typeof jQuery !== 'undefined'); // должно вернуть true

// Проверка Featherlight
console.log(typeof $.featherlight !== 'undefined'); // должно вернуть true

Если хотя бы один из этих вызовов возвращает false или undefined, библиотека не подключена или подключена некорректно.

Минимальный тест работы

Создание базового модального окна позволяет убедиться в функциональности Featherlight. Пример HTML:

<a href="#testModal" data-featherlight>Открыть модальное окно</a>

<div id="testModal" style="display:none;">
    <p>Тестовое содержимое модального окна</p>
</div>

При клике на ссылку должно появляться модальное окно с содержимым из #testModal. Если окно не открывается, следует проверить:

  1. Корректность селекторов.
  2. Отсутствие конфликтов с другими библиотеками.
  3. Ошибки в консоли браузера.

Проверка через JavaScript

Модальное окно можно открыть программно:

$.featherlight('#testModal');

Если окно появляется, значит библиотека работает корректно. В случае ошибки нужно убедиться, что DOM полностью загружен перед вызовом:

$(document).ready(function() {
    $.featherlight('#testModal');
});

Проверка событий Featherlight

Featherlight предоставляет события, позволяющие отслеживать открытие и закрытие окон. Для проверки корректной работы событий можно использовать следующий пример:

$(document).on('featherlight:open', function(event) {
    console.log('Модальное окно открыто');
});

$(document).on('featherlight:close', function(event) {
    console.log('Модальное окно закрыто');
});

Если сообщения выводятся в консоль при открытии и закрытии окна, библиотека работает полностью.

Проверка версий и конфликта с jQuery

Featherlight поддерживает jQuery версии 1.7 и выше. Для проверки версии jQuery используется:

console.log($.fn.jquery);

Если версия ниже 1.7, модальные окна работать не будут. Также стоит убедиться, что нет нескольких версий jQuery на странице, так как это вызывает конфликты и неправильное функционирование Featherlight.

Итоговые критерии корректной установки

  • jQuery подключен и работает.
  • CSS и JS Featherlight загружены без ошибок.
  • Минимальный тестовый пример открывается.
  • Программное открытие через $.featherlight() выполняется.
  • События featherlight:open и featherlight:close срабатывают.
  • Версия jQuery соответствует требованиям.

Следование этим шагам гарантирует, что Featherlight готов к полноценной интеграции и использованию в проекте.

Оглавление