Модальные окна поверх модальных окон
Модальные окна, или попапы, являются важным элементом интерфейса веб-приложений. Они используются для отображения информации, подтверждения действий, ввода данных и многого другого. В некоторых случаях возникает необходимость показывать одно модальное окно внутри другого. Например, если в основном окне отображается форма, а во всплывающем окне пользователь должен выбрать дату, расположить карту или подтвердить дополнительное действие. В таких ситуациях необходимо правильно управлять модальными окнами, чтобы предотвратить возможные ошибки взаимодействия и обеспечить качественный пользовательский опыт.
Когда на странице отображаются несколько модальных окон, важно обеспечить правильную обработку взаимодействий с ними. Часто встречаются следующие проблемы:
Для решения этих задач и построения правильного взаимодействия необходимо позаботиться о поддержке стекового (последовательного) отображения окон, их фокусировки и правильной логике закрытия.
Библиотека tingle.js представляет собой удобный инструмент для создания модальных окон в веб-приложениях. Она легка в использовании, предоставляет гибкие настройки и, самое главное, позволяет управлять несколькими окнами одновременно.
Для того чтобы реализовать несколько модальных окон с помощью tingle.js, необходимо несколько шагов: создание модальных окон, их отображение и скрытие, а также управление поведением окон друг с другом.
Прежде чем перейти к созданию модальных окон, необходимо подключить саму библиотеку. Для этого достаточно подключить соответствующие файлы CSS и JavaScript.
<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>После подключения библиотеки, создание модального окна с использованием tingle.js сводится к нескольким простым шагам:
Пример базового модального окна:
var modal = new tingle.modal({
footer: true,
stickyFooter: false,
closeLabel: "Закрыть"
});
modal.setContent('<h2>Модальное окно 1</h2><p>Это первый модальный элемент.</p>');
modal.open();Когда на странице необходимо отображать несколько модальных окон одновременно, важно позаботиться о правильной иерархии окон. tingle.js поддерживает такую функциональность с помощью событий, которые можно настроить для каждого окна. Это позволяет управлять тем, какое окно будет отображаться поверх другого.
Один из возможных подходов — это создание стека модальных окон, где каждый последующий попап открывается поверх предыдущего, и при закрытии окна стек сдвигается.
Пример реализации нескольких окон, открывающихся друг поверх друга:
// Модальное окно 1
var modal1 = new tingle.modal({
footer: true,
closeLabel: "Закрыть"
});
modal1.setContent('<h2>Модальное окно 1</h2><p>Это первое окно. Нажмите кнопку ниже для открытия следующего окна.</p>');
modal1.addFooterBtn('Открыть окно 2', 'tingle-btn tingle-btn--primary', function() {
modal1.close();
openModal2();
});
modal1.open();
// Модальное окно 2
function openModal2() {
var modal2 = new tingle.modal({
footer: true,
closeLabel: "Закрыть"
});
modal2.setContent('<h2>Модальное окно 2</h2><p>Это второе окно. Нажмите кнопку ниже для открытия следующего окна.</p>');
modal2.addFooterBtn('Открыть окно 3', 'tingle-btn tingle-btn--primary', function() {
modal2.close();
openModal3();
});
modal2.open();
}
// Модальное окно 3
function openModal3() {
var modal3 = new tingle.modal({
footer: true,
closeLabel: "Закрыть"
});
modal3.setContent('<h2>Модальное окно 3</h2><p>Это третье окно. Нажмите кнопку для закрытия.</p>');
modal3.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', function() {
modal3.close();
});
modal3.open();
}В этом примере при открытии первого окна пользователь может перейти ко второму, а затем — к третьему, создавая цепочку из модальных окон. Каждое окно закрывается до того, как откроется следующее.
Когда открывается несколько модальных окон, важно следить за тем, чтобы фокус оставался внутри текущего окна. Библиотека tingle.js автоматически блокирует фокусировку на заднем фоне, но при этом может быть полезным вручную контролировать фокусировку между окнами.
Можно использовать метод .setFocus() для управления
фокусом. Это обеспечит, чтобы фокус оставался в пределах текущего окна и
не переключался на другие элементы на странице.
Пример:
modal1.setFocus();Это поможет избежать ситуации, когда фокус случайно перемещается за пределы активного окна, создавая неудобства для пользователя.
Для управления стеком окон важно правильно обрабатывать логику закрытия. Например, при закрытии последнего модального окна, нужно удостовериться, что все элементы были скрыты и ресурсы освобождены.
modal1.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', function() {
modal1.close();
// Можно закрыть и другие окна, если они открыты
});Такой подход позволяет гибко управлять закрытием окон в зависимости от того, какие окна активны.
beforeOpen, afterClose и другие, которые
позволяет tingle.js.Пример использования событий:
modal1.on('beforeOpen', function() {
console.log('Окно открывается');
});
modal1.on('afterClose', function() {
console.log('Окно закрыто');
});Таким образом, правильное использование tingle.js позволяет создавать удобные и функциональные модальные окна, которые могут эффективно работать даже в условиях сложных интерфейсов с несколькими окнами одновременно.