Создание диалогового окна с подтверждением в JavaScript

Быстрый ответ

Зачем избирать обходные пути, если существует прямой маршрут: примените функцию confirm() для создания диалогового окна с кнопками "ОК" и "Отмена". Реакцию пользователя можно обработать следующим образом:

if (confirm("Готовы спуститься в кроличью нору?")) {
  // Итак, мы погружаемся в кроличью нору!
} else {
  // Ух! Мы ушли от проблем.
}

Функция confirm() возвращает true при нажатии "ОК" и false — при выборе "Отмена".

[AsideBanner]

Настраиваемое диалоговое окно – курс на индивидуализацию!

Функция confirm() достаточно проста и напоминает уютную, но немного устаревшую классику. Чтобы создать окно, которое будет естественно вписываться в ваш интерфейс, лучше направить усилия на создание пользовательского модального окна с помощью HTML, CSS и JavaScript. Суть подхода остаётся неизменной, но внешний вид заметно обновится.

Доступность – каждая деталь насчитывается!

Разрабатывая стильное настраиваемое диалоговое окно, обязательно учтите пользователей, которые предпочитают использовать клавиатуру мыши. Имеет значение обеспечение доступности, использование role="dialog" и удержание фокуса внутри модального окна, чтобы он не "слишался" с фоновыми элементами.

Визуализация

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

          [🚦] "К Городу Любопытных" (ОК)
         /
Ваша Позиция (Диалоговое Окно)
         \
          [🚧] "Домой, в Уют" (Отмена)

И каждый из маршрутов приведёт к абсолютно различным приключениям:

if (curiousCity) {
  // 👉 Мы отправляемся 🚀 к Городу Любопытных
} else {
  // 👈 Возвращаемся 🚌 домой, в Уют
}

Мелочи – глубже в настраиваемые диалоговые окна

Чистота кода – порядок превыше всего!

Уйдем от старомодных интерфейсов с их onclick, обратив внимание на программные обработчики событий. Используйте data-атрибуты для динамических подтверждающих сообщений — разделяйте код так: JavaScript оставьте в JavaScript, а HTML — в HTML. Будущее "вы" отблагодарит вас за это.

Правильный стиль – путь к идеалам

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

Тонкости сложного

Если в форме диалога сработает кнопка "Отмена", предотвратите отправку, возвращая false из обработчика. В случае работы с динамическими элементами или SPA (одностраничными приложениями), примените jQuery .on() для более эффективного управления событиями.

Уровень эксперта – в погоне за совершенством диалоговых окон

Планирование – порядок во всём!

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

Жизнь в SPA-приложениях

В одностраничных приложениях взаимодействия с пользователем динамичны и управлять состояниями требуется гибкость. Применяйте фреймворки типа React или Vue для управления состояниями виджетов и облегчения работы с ними.

Настройка для пользователя

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

Полезные материалы

1. <dialog>: Элемент Dialog – HTML: HyperText Markup Language | MDN — Подробное руководство по использованию элемента <dialog>.
2. GitHub – KittyGiraudel/a11y-dialog: Ультра легкое и гибкое решение для создания доступных модальных окон — Отличный вариант модального окна, с подробной информацией на GitHub.
3. Модальное окно · Bootstrap — Официальная документация Bootstrap по созданию модальных окон.
4. Диалог | jQuery UI — Документация виджета jQuery UI с практическими примерами.
5. sql – Складские данные – Медленно меняющиеся измерения с многократными связями – Stack Overflow — Дискуссия на Stack Overflow, которая придает понимание оптимизации работы со стандартными и настраиваемыми диалоговыми окнами.