Передача опций при создании

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

Для создания базового модального окна достаточно вызвать функцию BasicLightbox.create(), передав в качестве параметра HTML-элемент или строку с разметкой. Однако, чтобы сделать окно более интерактивным и подходящим под специфические требования, можно передать дополнительные опции в виде объекта. Эти опции влияют на внешний вид окна, анимацию, а также взаимодействие с пользователем.

Пример базового создания окна:

const instance = BasicLightbox.create('<img src="image.jpg" alt="Sample image">');

Однако для детальной настройки потребуется передать объект с параметрами. Рассмотрим, какие опции доступны.

Опции для настройки

  1. closable Опция closable определяет, будет ли окно иметь возможность закрываться пользователем. По умолчанию модальное окно можно закрыть, кликнув по его фону. Если значение опции установлено в false, то закрытие через фон будет заблокировано. Также возможно закрытие окна программно, вызвав метод instance.close().

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

    const instance = BasicLightbox.create('<img src="image.jpg">', {
  closable: false
});

  2. onClose В качестве опции onClose передается функция, которая будет вызвана при закрытии окна. Это может быть полезно для выполнения дополнительных действий (например, сброс состояния или логирование).

    Пример:

    const instance = BasicLightbox.create('<div>Content</div>', {
  onClose: () => {
    console.log('Окно закрыто');
  }
});

  3. trapFocus Опция trapFocus позволяет ограничить фокусировку на элементах внутри модального окна. Это важно для обеспечения доступности, чтобы пользователь не мог случайно выйти за пределы модального окна с клавиатуры. Значение по умолчанию — true, что означает, что фокус будет оставаться внутри окна.

    Пример:

    const instance = BasicLightbox.create('<input type="text">', {
  trapFocus: true
});

  4. beforeShow Опция beforeShow позволяет задать функцию, которая будет выполнена перед тем, как окно станет видимым. Это может быть полезно для выполнения анимаций или загрузки данных до того, как окно откроется.

    Пример:

    const instance = BasicLightbox.create('<div>Загружаемый контент</div>', {
  beforeShow: () => {
    console.log('Окно собирается открыться');
  }
});

  5. onShow Функция, переданная в onShow, будет выполнена сразу после того, как модальное окно будет отображено на экране. Это позволяет, например, запускать анимации или изменять состояние интерфейса, когда окно становится видимым.

    Пример:

    const instance = BasicLightbox.create('<div>Контент</div>', {
  onShow: () => {
    console.log('Окно отображено');
  }
});

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

    Пример:

    const instance = BasicLightbox.create('<div>Мой контент</div>', {
  onResize: () => {
    console.log('Размер окна изменен');
  }
});

  7. height и width Эти параметры позволяют задать размеры модального окна, задав фиксированную высоту и ширину в пикселях. Это может быть полезно, если нужно, чтобы окно имело конкретный размер, независимо от содержимого.

    Пример:

    const instance = BasicLightbox.create('<div>Контент</div>', {
  width: 600,
  height: 400
});

  8. className Опция className позволяет добавить дополнительные CSS-классы к модальному окну. Это дает возможность значительно расширить стиль окна, не ограничиваясь стандартными стилями библиотеки.

    Пример:

    const instance = BasicLightbox.create('<div>Контент</div>', {
  className: 'my-custom-modal'
});

  9. html Параметр html позволяет задать HTML-разметку, которая будет вставлена внутрь модального окна. Это позволяет добавлять более сложные структуры и элементы, такие как формы, списки и другие компоненты.

    Пример:

    const instance = BasicLightbox.create('<div><h2>Заголовок</h2><p>Текст</p></div>', {
  html: '<p>Пользовательский контент</p>'
});

Пример использования с несколькими опциями

Для демонстрации всех вышеупомянутых опций можно создать модальное окно с расширенными настройками, включая изменение размеров, функции перед открытием, обработку закрытия и добавление классов для стилизации.

Пример:

const instance = BasicLightbox.create('<div>Модальное окно с опциями</div>', {
  closable: true,
  trapFocus: true,
  beforeShow: () => {
    console.log('Готовим окно к отображению');
  },
  onShow: () => {
    console.log('Окно отображено');
  },
  onClose: () => {
    console.log('Окно закрыто');
  },
  width: 500,
  height: 300,
  className: 'custom-modal'
});

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

Итог

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

Оглавление