Создание динамических модальных окон в JavaScript с помощью Tailwind CSS
Пока работаю над своим первым групповым проектом. Я пошел другим путем при создании модального окна; которые привели меня на путь открытия создания модальных окон в JavaScript. Несмотря на сложность, я рад, что с помощью членов моей группы мы преодолели все ошибки и невзгоды, потому что это дало мне знания о другом методе создания модальных окон в будущем.
Модальные окна — полезный инструмент для предоставления пользователям важной информации, предупреждений и подсказок на веб-странице. Модальные окна часто используются для отображения предупреждающих сообщений, сбора входных данных или подтверждения действия. Сегодня я хотел бы показать вам, как создавать динамические модальные окна с помощью JavaScript, D3.js и популярного фреймворка Tailwind CSS.
Преимущество создания модальных окон с использованием JavaScript заключается в том, что оно обеспечивает большую гибкость, поскольку позволяет вам манипулировать DOM и создавать динамические модальные окна, которые реагируют на ввод пользователя или результаты выборки API. В этом примере я покажу вам, как использовать библиотеку D3.js для выбора тела HTML и добавления элементов HTML, но D3.js — не единственная библиотека, позволяющая разработчикам легко выбирать элементы на странице и управлять ими. Когда дело доходит до стилизации модальных окон, CSS-фреймворки, такие как Tailwind CSS, — это быстрый и простой способ создания визуально привлекательных модальных окон. Фреймворк Tailwind CSS предоставляет широкий спектр классов, которые можно применять к модальному контейнеру и элементам. Это позволяет разработчикам создавать модальные окна с единым внешним видом, которые также легко настраивать.
Вы можете применить любые настройки и стили из широкого диапазона классов Tailwind CSS, которые вы хотели бы, но в приведенном выше примере с использованием Tailwind CSS мы стилизуем наше модальное окно, применяя несколько классов, таких как «fixed inset-0 bg-gray- 500 bg-opacity-50 background-blur-sm justify-center items-center flex w-1/8 h-1/8”. Эти классы будут устанавливать положение, цвет фона и размер модального окна.
Эта условная функция будет сигнализировать нашей модальной функции Open. Он отправляет запрос API-интерфейсу Ticket Master (ticketMasterApiUrl) для получения данных о событии на основе города, жанра, даты начала и даты окончания, предоставленных пользователем. Если запрос выполнен успешно и события найдены, он отображает их пользователю. Однако, если запрос не удался или события не найдены, он сигнализирует функции «openModal» о создании модального окна предупреждения, которое информирует пользователя о том, что тип события, который он искал, недоступен в выбранном городе, и помогает ему выбрать другой. тип события.
Наш модальный пример состоит из трех основных частей: заголовка, тела и нижнего колонтитула. Заголовок создается путем добавления «элемента h3» и применения классов «text-xl font-medium leading-normal text-black». Тело создается путем добавления div и применения класса text-black text-center. Текст, отображаемый в теле, может быть установлен на любое желаемое сообщение. (Как показано ниже)
Переходим к нижнему колонтитулу, который создается путем добавления div к телу модального окна и применения классов «flex justify-end items-center p-4». Затем в нижний колонтитул добавляется кнопка с текстом «ОК» и классами «px-6 py-2.5 bg-teal-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg- чирок-700».
При нажатии кнопки модальное окно будет скрыто с помощью функции D3.js, запускаемой прослушивателем событий «.on («щелчок»)». Затем, чтобы отобразить модальное окно, нам просто нужно выбрать класс «warningModal» и установить стиль отображения «блок». (Как показано ниже)
В заключение, этот метод предлагает сочетание визуальной привлекательности и функциональности, что делает его отличным вариантом для разработчиков, которые хотят создавать динамические, условно отображаемые или интерактивные модальные окна. В целом, ключевым выводом является то, что модальные окна можно сделать более гибкими и динамичными с помощью JavaScript и стилизовать их с помощью фреймворков CSS, таких как Tailwind CSS, чтобы они выглядели великолепно и легко настраивались.
