Пример управления модальными окнами Bootstrap 5 с помощью AlpineJS

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

Принцип работы примера

Начну с напоминания того, что в Bootstrap компонент модального окна представлен в виде несложной структуры, состоящей согласно документации из нескольких элементов с классами .modal .modal-dialog .modal-content .modal-header .modal-body и т.д. Проблема в том, что для реализации появления и исчезновения модальных окон, нам надо разобраться в том, как это делает Bootstrap и затем перенести это на AlpineJS. А зачем нам повторять то, что уже реализовано в Bootstrap если можно просто использовать эти его возможности прямо в AlpineJS?

Суть примера как раз состоит в том, что мы можем из разных мест вызывать одно и то же модальное окно с помощью Bootstrap-овских data-атрибутов data-bs-* , а вот менять контент этого модального окна мы можем с помощью AlpineJS и его директивы x-teleport (которая во многом вдохновлена механизмом Teleport из мира Vue).

Пример, который можно запустить на Codepen:

Конечно, хотя и получилось все сделать чисто в декларативном стиле, под капотом всего этого работает JavaScript (в Bootstrap 5 управление модальными окнами реализовано с помощью Popper.JS). Тем не менее неплохо то, что удалось обойтись без написания отдельного пользовательского JavaScript, который бы всем этим управлял и фактически представлял бы собой еще одну зависимость в проекте. А необдуманно плодить большое количество зависимостей в проекте не всегда хорошо. Ну и просто, по мне это вполне неплохой пример использования x-teleport из AlpineJS.

Заключение

Вообще представленный пример можно еще упростить, если разобраться в том, что именно делает с DOM-моделью PopperJS в Bootstrap при создании и скрытии модальных окон, но я не стал уже так заморачиваться, ибо исходной целью примера было показать возможность бесшовного взаимодействия этих двух фреймворков без углубления в то, как их функционал внутри работает.

Что касается AlpineJS, то как видим, хоть он и является миниатюрным фреймворком, тем не менее он вполне может упростить (или даже устранить) код проекта, в котором происходит какое-то управление DOM-модели. При этом главное не переусердствовать, чтобы наоборот, не снизить общее качество кода и читаемость.