Создание первого модального окна

Tingle.js — это небольшая и простая в использовании JavaScript-библиотека для создания модальных окон. Она предоставляет удобный интерфейс для работы с модальными окнами, поддерживает анимации и адаптивность, и может быть легко интегрирована в любой проект. В этой статье будет рассмотрен процесс создания первого модального окна с использованием Tingle.js.

Установка Tingle.js

Для начала нужно установить саму библиотеку. Можно использовать два основных способа:

  1. Через CDN: Это самый простой способ добавить Tingle.js в проект. Вставьте следующие строки в файл HTML в раздел <head>:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.css">
<script src="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.js"></script>

  2. Через NPM: Если проект использует сборщик, можно установить библиотеку через NPM:

    npm install tingle.js

    После этого её можно импортировать в ваш файл Jav * aScript:

    import tingle from 'tingle.js';

Создание базового модального окна

Создание модального окна с использованием Tingle.js сводится к нескольким простым шагам. Начнём с самого основного примера.

  1. Создание объекта модального окна:

    В первую очередь нужно создать экземпляр модального окна:

    const modal = new tingle.modal({
  closeMethods: ['click', 'escape'],
  closeLabel: 'Закрыть',
  cssClass: ['custom-class'],
  beforeClose: function () {
    return true;
  }
});

    В этом примере создаётся модальное окно, которое можно закрыть как кликом, так и с помощью клавиши Escape. Также задается текст для кнопки закрытия и добавляется пользовательский класс для стилизации.

  2. Добавление контента в модальное окно:

    Чтобы добавить контент в окно, необходимо использовать метод setContent. Например, можно добавить HTML-строку, которая будет отображаться внутри модального окна:

    modal.setContent('<h2>Пример модального окна</h2><p>Это базовый пример модального окна, созданного с помощью Tingle.js.</p>');

  3. Открытие модального окна:

    Когда контент готов, окно можно открыть с помощью метода open:

    modal.open();

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

Настройка параметров модального окна

Tingle.js предоставляет множество опций для настройки поведения модального окна. Рассмотрим основные из них.

  • closeMethods: Это массив, который определяет методы для закрытия окна. Стандартные значения: ['click', 'escape']. Можно добавить методы, такие как клик по фону или другие.

  • closeLabel: Этот параметр задает текст на кнопке закрытия. Он полезен для кастомизации интерфейса в зависимости от языка или требований дизайна.

  • cssClass: С помощью этого параметра можно добавить кастомные классы для модального окна, что позволяет стилизовать его по вашему усмотрению.

  • beforeClose: Это функция, которая вызывается перед закрытием окна. Если она возвращает true, окно будет закрыто, если false, то закрытие отменяется. Это может быть полезно для реализации дополнительных проверок перед тем, как окно будет скрыто.

  • footer: Модальное окно можно снабдить кастомным футером, добавив элементы управления, такие как кнопки или другие элементы интерфейса.

Стилизация модального окна

С помощью параметра cssClass можно добавить собственные стили для модального окна. Например, можно изменить фон, шрифт, анимацию или размеры окна.

Пример кастомизации стилей:

.custom-class .tingle-modal {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
}

.custom-class .tingle-modal__header {
  color: #fff;
  font-size: 24px;
  text-align: center;
}

.custom-class .tingle-modal__footer {
  text-align: center;
}

.custom-class .tingle-modal__close {
  color: red;
  font-size: 18px;
}

Эти стили применятся ко всем модальным окнам, для которых задан класс custom-class.

Работа с несколькими окнами

Tingle.js позволяет работать с несколькими модальными окнами одновременно. Просто создайте несколько экземпляров модальных окон и управляйте их открытием и закрытием по мере необходимости.

Пример:

const modal1 = new tingle.modal({ closeMethods: ['click', 'escape'], closeLabel: 'Закрыть' });
const modal2 = new tingle.modal({ closeMethods: ['click', 'escape'], closeLabel: 'Закрыть' });

modal1.setContent('<h2>Первое окно</h2><p>Содержимое первого окна.</p>');
modal2.setContent('<h2>Второе окно</h2><p>Содержимое второго окна.</p>');

document.getElementById('openModal1').addEventListener('click', () => {
  modal1.open();
});

document.getElementById('openModal2').addEventListener('click', () => {
  modal2.open();
});

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

Заключение

Tingle.js — это простой, но мощный инструмент для работы с модальными окнами. Он позволяет легко создавать кастомизированные окна с минимальными усилиями и без необходимости в написании большого количества кода. Благодаря простоте использования и широким возможностям настройки, библиотека подходит для любых типов проектов, от небольших веб-приложений до сложных интерфейсов.

Оглавление