Размещение форм

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

Основы работы с Tingle.js

Для начала необходимо подключить библиотеку к проекту. Это можно сделать с помощью CDN или загрузив библиотеку локально. Включение через CDN выглядит следующим образом:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tingle.js/0.15.0/tingle.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tingle.js/0.15.0/tingle.min.js"></script>

После этого можно создать базовую структуру модального окна с помощью JavaScript.

var modal = new tingle.modal({
  footer: true,  // Размещение кнопок внизу
  stickyFooter: true, // Прокрутка содержимого при прокрутке
  closeLabel: "Закрыть", // Текст кнопки для закрытия
});

Размещение формы внутри модального окна

Tingle.js предоставляет удобный способ добавлять форму в модальное окно. Для этого достаточно создать HTML-форму и вставить её в тело модального окна. Форма может содержать различные поля ввода: текстовые поля, чекбоксы, радиокнопки и другие элементы управления.

modal.setContent(`
  <form id="exampleForm">
    <div class="form-group">
      <label for="name">Имя</label>
      <input type="text" id="name" name="name" class="form-control" required>
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" class="form-control" required>
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
  </form>
`);

Здесь используется стандартная форма HTML с двумя полями ввода: для имени и email. Обратите внимание, что кнопка отправки формы является частью контента модального окна.

Открытие и закрытие модального окна

После того как форма добавлена в модальное окно, нужно определить действия при открытии и закрытии окна. Для этого можно использовать методы open() и close().

document.getElementById("openModal").addEventListener("click", function () {
  modal.open();  // Открыть модальное окно
});

Модальное окно закрывается автоматически при клике на кнопку закрытия, но это можно изменить, если нужно обработать отправку формы.

Обработка отправки формы внутри модального окна

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

document.getElementById('exampleForm').addEventListener('submit', function(event) {
  event.preventDefault();  // Предотвратить стандартное поведение формы

  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;

  // Можно выполнить асинхронный запрос, например, отправку данных на сервер

  console.log('Имя: ' + name);
  console.log('Email: ' + email);

  modal.close();  // Закрыть окно после отправки
});

В данном примере отправка данных формы предотвращается, и осуществляется вывод значений в консоль. Затем модальное окно закрывается.

Стилизация модального окна с формой

Tingle.js позволяет применять стили к различным элементам модального окна. Это касается как самого окна, так и его содержимого. Например, можно добавить кастомные классы к полям формы или кнопкам.

.tingle-modal {
  background-color: #f4f4f4;  /* Цвет фона модального окна */
}

.tingle-modal__content {
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-control {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
}

.btn-primary {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
}

В данном примере стилизация затрагивает как внешний вид модального окна, так и элементы внутри него, такие как поля ввода и кнопки.

Использование модальных окон для подтверждения ввода

Tingle.js может быть полезен не только для ввода данных, но и для создания окон подтверждения. В случае с формой, можно использовать модальное окно для получения подтверждения перед отправкой данных.

modal.setContent(`
  <form id="confirmForm">
    <p>Вы уверены, что хотите отправить данные?</p>
    <button type="submit" class="btn btn-success">Да</button>
    <button type="button" class="btn btn-danger" oncl ick="modal.close()">Нет</button>
  </form>
`);

Такое окно может быть полезно, например, перед отправкой формы, если пользователь должен подтвердить свои действия.

Расширенные возможности работы с модальными окнами

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

var modal = new tingle.modal({
  closeMethods: ['button', 'overlay', 'escape'],
  animation: 'fade',
  closeLabel: 'Закрыть',
  stickyFooter: false,
});

В этом примере модальное окно будет закрываться при клике на кнопку, overlay (фон за окном) или при нажатии клавиши Escape. Кроме того, задана анимация появления окна.

Заключение

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

Оглавление