Создание компонента Modal в Alpine.js

Модальное окно (Modal) на Alpine.js + Tailwind CSS

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

---

Пример кода

<div x-data="{ open: false }">
  <!-- Кнопка для открытия модалки -->
  <button 
    @click="open = true" 
    class="px-4 py-2 bg-blue-500 text-white rounded">
    Открыть модальное окно
  </button>

  <!-- Модальное окно -->
  <div 
    x-show="open" 
    x-transition
    class="fixed inset-0 flex items-center justify-center z-50"
    style="display: none;">
    
    <!-- Фон-затемнение -->
    <div 
      class="absolute inset-0 bg-black opacity-50" 
      @click="open = false">
    </div>

    <!-- Окно -->
    <div class="bg-white rounded-lg overflow-hidden shadow-lg z-10 w-1/3">
      <div class="p-4">
        <h2 class="text-lg font-semibold">Заголовок модального окна</h2>
        <p class="mt-2 text-gray-600">
          Это содержимое модального окна. Вы можете добавить сюда текст, форму или любое другое содержимое.
        </p>
      </div>
      <div class="p-4 bg-gray-100 text-right">
        <button 
          @click="open = false" 
          class="px-4 py-2 bg-gray-300 rounded">
          Закрыть
        </button>
      </div>
    </div>
  </div>
</div>

---

Как это работает

1. Переменная состояния
   В x-data="{ open: false }" мы создаём переменную open. Она отвечает за то, открыто окно (true) или закрыто (false).
2. Кнопка открытия
   У кнопки есть @click="open = true". При клике переменная становится true, и модалка появляется.
3. Отображение окна
   • x-show="open" управляет показом.
   • x-transition добавляет плавное появление и исчезновение.
4. Затемнение фона
   Блок absolute inset-0 bg-black opacity-50 создаёт полупрозрачный чёрный фон. При клике по нему (@click="open = false") окно закрывается.
5. Само окно
   • Белый фон, скруглённые углы, тень.
   • Заголовок + текст.
   • Нижняя панель с кнопкой «Закрыть».

---

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

• Кликаем по кнопке «Открыть модальное окно» → появляется модалка.
• Кликаем по затемнённому фону или по кнопке «Закрыть» → окно исчезает.

---

Итог

Создать модальное окно с Alpine.js и Tailwind CSS — очень просто. Оно хорошо подходит для:

• сообщений и уведомлений,
• подтверждений действий (например, удаление),
• форм и быстрых диалогов.

Вы можете легко доработать модалку:
✨ добавить анимацию,
✨ вставить форму входа/регистрации,
✨ сделать разные размеры и стили.