Создание кнопок в footer

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

Для реализации кнопок в нижней части страницы с помощью Tingle.js потребуется выполнить несколько основных шагов:

  1. Подключение библиотеки Tingle.js
  2. Создание структуры footer
  3. Инициализация модальных окон
  4. Создание и настройка кнопок
  5. Добавление событий на кнопки для открытия модальных окон

Подключение библиотеки Tingle.js

Первым шагом будет подключение самой библиотеки. Tingle.js можно интегрировать на страницу двумя основными способами — через CDN или скачав файлы библиотеки.

<!-- Подключение стилей Tingle.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tingle.js/0.15.0/tingle.min.css">

<!-- Подключение скрипта Tingle.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tingle.js/0.15.0/tingle.min.js"></script>

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

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

<footer>
  <div class="footer-container">
    <button id="modalButton1" class="footer-btn">Кнопка 1</button>
    <button id="modalButton2" class="footer-btn">Кнопка 2</button>
  </div>
</footer>

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

Инициализация модальных окон

Далее нужно настроить модальные окна с помощью Tingle.js. Для этого используется класс tingle.modal(), который предоставляет все необходимые методы для настройки и отображения модальных окон.

// Создание первого модального окна
var modal1 = new tingle.modal({
    footer: true, // Включаем нижний колонтитул
    stickyFooter: true, // Закрепляем футер окна
    closeMethods: ['button', 'overlay'], // Способы закрытия окна
    closeLabel: "Закрыть", // Текст на кнопке закрытия
    cssClass: ['custom-modal'], // Стили для модального окна
    onOpen: function () {
        console.log("Окно 1 открыто");
    },
    onClose: function () {
        console.log("Окно 1 закрыто");
    }
});

// Создание второго модального окна
var modal2 = new tingle.modal({
    footer: true,
    stickyFooter: true,
    closeMethods: ['button', 'overlay'],
    closeLabel: "Закрыть",
    cssClass: ['custom-modal'],
    onOpen: function () {
        console.log("Окно 2 открыто");
    },
    onClose: function () {
        console.log("Окно 2 закрыто");
    }
});

Каждое окно конфигурируется отдельно, позволяя настроить поведение, внешний вид и взаимодействие с пользователем.

Создание и настройка кнопок

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

// Обработчик для кнопки 1
document.getElementById("modalButton1").addEventListener("click", function() {
    modal1.setContent("<h2>Содержимое окна 1</h2><p>Здесь можно разместить любой контент.</p>");
    modal1.open();
});

// Обработчик для кнопки 2
document.getElementById("modalButton2").addEventListener("click", function() {
    modal2.setContent("<h2>Содержимое окна 2</h2><p>Здесь размещён другой контент.</p>");
    modal2.open();
});

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

Стилизация кнопок и модальных окон

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

footer {
    background-color: #333;
    padding: 20px;
    text-align: center;
}

.footer-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-btn {
    background-color: #4CAF50;
    color: white;
    padding: 15px 32px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.footer-btn:hover {
    background-color: #45a049;
}

.custom-modal .tingle-modal-box {
    max-width: 600px;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
}

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

Заключение

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

Оглавление