Множественные модальные окна

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

Создание нескольких модальных окон

При работе с Tingle.js, модальные окна создаются с помощью конструктора, который генерирует объект модального окна. Для того чтобы работать с несколькими окнами, достаточно создать несколько таких объектов. Каждый объект будет представлять отдельное модальное окно, которое можно настроить и вызвать независимо от других.

Пример создания двух модальных окон:

var modal1 = new tingle.modal();
var modal2 = new tingle.modal();

Оба этих объекта modal1 и modal2 теперь могут быть настроены и отображены независимо друг от друга.

Конфигурация модальных окон

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

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

// Настройка первого модального окна
modal1.setContent('<h2>Первое окно</h2><p>Контент первого окна</p>');
modal1.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', function () {
    modal1.close();
});

// Настройка второго модального окна
modal2.setContent('<h2>Второе окно</h2><p>Контент второго окна</p>');
modal2.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', function () {
    modal2.close();
});

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

Открытие нескольких окон одновременно

Для работы с несколькими окнами важно правильно управлять их отображением. Можно открывать несколько окон одновременно, используя метод open() для каждого модального окна. Однако важно помнить, что Tingle.js по умолчанию позволяет только одно активное окно на экране. Поэтому для корректного отображения нескольких окон нужно настраивать поведение каждого из них.

Пример открытия двух окон:

modal1.open();
modal2.open();

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

Управление порядком отображения окон

Для того чтобы окна не накладывались друг на друга, можно настроить их приоритет с помощью параметров стилей или вручную управлять их порядком. Tingle.js позволяет легко изменять z-index каждого окна, чтобы обеспечить корректное наложение.

Пример настройки z-index:

modal1.open();
modal1.getModal().style.zIndex = '1000';  // Первое окно сверху

modal2.open();
modal2.getModal().style.zIndex = '900';   // Второе окно ниже

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

Закрытие модальных окон

Важной частью работы с несколькими окнами является корректное управление их закрытием. Закрытие одного окна не должно влиять на другие, если они были открыты одновременно. Для этого можно использовать метод close(), который закроет только активное окно.

Пример закрытия всех окон:

modal1.close();
modal2.close();

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

Управление взаимодействием между окнами

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

Пример создания цепочки окон:

modal1.addFooterBtn('Открыть следующее окно', 'tingle-btn tingle-btn--primary', function () {
    modal1.close();
    modal2.open();
});

В данном примере при закрытии первого окна автоматически открывается второе.

Применение кастомных эффектов для окон

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

Пример применения анимации:

modal1.setAnimation('fade');
modal2.setAnimation('slideUp');

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

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

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

<button id="showModal1">Показать окно 1</button>
<button id="showModal2">Показать окно 2</button>

<script>
    var modal1 = new tingle.modal();
    modal1.setContent('<h2>Первое окно</h2><p>Это контент первого окна</p>');
    modal1.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', function () {
        modal1.close();
    });

    var modal2 = new tingle.modal();
    modal2.setContent('<h2>Второе окно</h2><p>Это контент второго окна</p>');
    modal2.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', function () {
        modal2.close();
    });

    document.getElementById('showModal1').addEventListener('click', function () {
        modal1.open();
    });

    document.getElementById('showModal2').addEventListener('click', function () {
        modal2.open();
    });
</script>

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

Заключение

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

Оглавление