В мире веб-разработки JavaScript играет жизненно важную роль в создании интерактивного и привлекательного пользовательского опыта. Одной из часто используемых функций в JavaScript является confirm(), которая отображает диалоговое окно с сообщением и кнопками, позволяющими пользователю подтвердить или отменить действие. Однако в последние годы использование confirm()сократилось, поскольку разработчики исследуют альтернативные методы достижения того же результата. В этой статье мы углубимся в некоторые из этих методов, приведем примеры кода и объясним, как их можно использовать в качестве замены традиционной функции confirm().

Метод 1: пользовательские модальные диалоги
Одной популярной альтернативой confirm()является создание пользовательских модальных диалогов с использованием HTML, CSS и JavaScript. Создав собственное диалоговое окно, вы получаете полный контроль над дизайном и поведением подтверждающего сообщения. Вот пример:

function showConfirmation(message, callback) {
  // Create modal dialog elements
  const modal = document.createElement("div");
  modal.className = "modal";
  const messageElement = document.createElement("p");
  messageElement.textContent = message;
  const confirmButton = document.createElement("button");
  confirmButton.textContent = "Confirm";
  const cancelButton = document.createElement("button");
  cancelButton.textContent = "Cancel";
  // Append elements to the modal dialog
  modal.appendChild(messageElement);
  modal.appendChild(confirmButton);
  modal.appendChild(cancelButton);
  // Attach event listeners
  confirmButton.addEventListener("click", () => {
    callback(true);
    modal.remove();
  });
  cancelButton.addEventListener("click", () => {
    callback(false);
    modal.remove();
  });
  // Display the modal dialog
  document.body.appendChild(modal);
}

Метод 2: использование обещаний
Другой подход — использовать обещания для обработки подтверждений пользователей. Промисы предоставляют более современный и асинхронный способ взаимодействия с пользователем. Вот пример:

function confirmPromise(message) {
  return new Promise((resolve) => {
    const result = window.confirm(message);
    resolve(result);
  });
}
// Usage
confirmPromise("Are you sure?")
  .then((confirmed) => {
    if (confirmed) {
      // Proceed with the action
    } else {
      // Cancel the action
    }
  });

Метод 3: модальные библиотеки
Если вы предпочитаете более оптимизированное решение, вы можете использовать популярные библиотеки JavaScript, которые предоставляют готовые модальные компоненты. Эти библиотеки предлагают настраиваемые диалоговые окна и упрощают процесс обработки подтверждений пользователей. Некоторые популярные варианты включают модальное окно Bootstrap, диалоговое окно Material-UI и SweetAlert. Вот пример использования SweetAlert:

// Usage with SweetAlert
Swal.fire({
  title: "Are you sure?",
  icon: "question",
  showCancelButton: true,
  confirmButtonText: "Confirm",
  cancelButtonText: "Cancel",
})
  .then((result) => {
    if (result.isConfirmed) {
      // Proceed with the action
    } else {
      // Cancel the action
    }
  });

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