Кастомизация всплывающего окна confirm в Javascript

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

Стандартное диалоговое окно подтверждения в JavaScript предлагает ограниченные возможности настройки. Таким образом, стандартные кнопки "ОК" и "Отмена" не могут быть заменены на "Да" и "Нет". Однако, решение существует — пользовательские модальные окна. Представляем пример такого окна, который легко интерпретировать и использовать:

<div id="confirmModal" style="display:none;">
  <p>Вы уверены, что хотите продолжить?</p>
  <button id="yesBtn">Да</button>
  <button id="noBtn">Нет</button>
</div>

// Включаем или отключаем отображение модального окна.
const confirmModal = document.getElementById('confirmModal');
const yesBtn = document.getElementById('yesBtn');
const noBtn = document.getElementById('noBtn');
function showModal() { confirmModal.style.display = 'block'; }
function hideModal() { confirmModal.style.display = 'none'; }

// Устанавливаем обработчики на кнопки.
yesBtn.addEventListener('click', () => { hideModal(); /* Код для "Да" */ });
noBtn.addEventListener('click', () => { hideModal(); /* Код для "Нет" */ });

Чтобы отобразить окно подтверждения, достаточно вызвать функцию showModal().

Методы создания пользовательских модальных окон

Использование jQuery UI

Заинтересованы в универсальном решении для всех браузеров? Диалоговые окна jQuery UI — инструмент, который позволяет создавать собственные диалоговые окна подтверждения. Они предоставляют однородный пользовательский опыт в разных браузерах:

$("#confirmModal").dialog({
  resizable: false,
  height: "auto",
  width: 400,
  modal: true,
  buttons: {
    "Да": function() { 
      $(this).dialog("close"); 
      // Код для ответа "Да".
    },
    "Нет": function() {
      $(this).dialog("close"); 
      // Код для ответа "Нет".
    }
  }
});

Эстетика Sweetalert

Если вам незаменим стиль, рассмотрите Sweetalert. Он придаст ваши модальные окна элегантности с красивыми кнопками Да и Нет:

swal({
  title: "Вы уверены?",
  icon: "warning",
  buttons: {
    yes: {
      text: "Да",
      value: true,
      className: "sweet-yes"
    },
    no: {
      text: "Нет",
      value: false,
      className: "sweet-no"
    }
  },
}).then((value) => {
  if (value) {
    // Код для ответа "Да".
  } else {
    // Код для ответа "Нет".
  }
});

Диалоги, основанные на DOM

Если вы предпочитаете работать напрямую с DOM и создавать индивидуализированные решения, данный подход подойдет для вас:

// Основа для всплывающего окна с делегацией событий
document.body.addEventListener('click', function(event) {
  if(event.target.id === 'yesBtn') { /* Код для "Да" */ }
  if(event.target.id === 'noBtn') { /* Код для "Нет" */ }
});

Соблюдение стандартов доступности

Не забывайте делать ваше всплывающее окно доступным. Управление клавиатурным фокусом и атрибуты ARIA, такие как role="dialog" и aria-labelledby, помогут сделать ваше модальное окно удобным для пользователей со скринридерами.

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

Это ваш шанс преобразовать стандартные кнопки диалогового окна в JavaScript из ОК и Отмена в Да и Нет:

Стандартное диалоговое окно: [🆗 ОК] [✖️ Отмена]

После подобного преобразования окно приобретет такой вид:

Пользовательское диалоговое окно: [✔️ Да] [❌ Нет]

Внедрение корпоративной цветовой гаммы

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

Промисы: обработка пользовательских ответов

Использование промисов и модели async/await упрощает управление асинхронными действиями пользователей, делая код более понятным и структурированным.

Консистентность в различных браузерах

Очень важно, чтобы ваши модальные окна показывали одинаково хорошую производительность во всех браузерах и на всех устройствах. Сторонние библиотеки, такие как jQuery UI, обеспечивают совместимость, но для собственных решений возможно потребуется дополнительная обработка стилизации и функциональности.

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

1. Модальные окна в Bootstrap — сведения по созданию модальных окон в Bootstrap.
2. Метод Window.confirm() – MDN Web Docs — документация по стандартному окну подтверждения.
3. Создание диалогового окна с вариантами "ОК" и "Отмена" на Stack Overflow — обсуждение вариантов создания пользовательских диалогов подтверждения.
4. SweetAlert — библиотека для модификации стандартных окон подтверждения.
5. Стилизация модального окна на CSS-Tricks — советы по оформлению модальных окон.
6. Основы работы с JavaScript-промисами — начальные сведения о промисах в JavaScript.
7. Vue Mastery — руководство по созданию модальных окон в Vue.js.