Как создать диалоговое окно подтверждения при клике на ссылку

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

Для отображения запроса на подтверждение действия при нажатии на ссылку, можно привлечь JavaScript и добавить обработчик события onclick прямо в элементе:

document.querySelector('a.confirm').onclick = function() {
  return confirm('Вы уверены, что хотите покинуть эту страницу?');
};

HTML-разметка будет иметь следующий вид:

<a href="https://mywebsite.com" class="confirm">Покинуть страницу</a>

Если вы ищете более сложное решение и профессиональный подход, продолжите чтение.

Разделение HTML и JavaScript для подсодержания наглядности кода

Разделение логики обработки событий от HTML-разметки является целесообразной рекомендацией для улучшения управляемости и поддержки кода:

document.addEventListener('DOMContentLoaded', function() {
  var links = document.querySelectorAll('a.confirm');
  links.forEach(function(link) {
    link.addEventListener('click', navigationConfirmation);
  });
});

function navigationConfirmation(event) {
  if (!confirm('Вы действительно хотите покинуть уют этой страницы?')) {
    event.preventDefault(); // Дополнительные подсказки в консоли помогут понять поведение скрипта
  }
}

В этом примере сначала загружается структура страницы вместе со всеми элементами. После этого каждой ссылке добавляется обработчик событий. Если посетитель в появившемся окне выбирает "Отмена", затем event.preventDefault() отменяет переход по ссылке.

Изящные обработчики событий для структурированного кода

Применение классов в JavaScript позволяет организовать обработчики событий, что способствует упорядочиванию кода и его масштабируемости:

class ConfirmedLink {
  constructor(element) {
    this.element = element;
    this.init();
  }

  init() {
    this.element.addEventListener('click', this.confirmNavigation.bind(this));
  }

  confirmNavigation(event) {
    if (!confirm('Нажмите OK, чтобы перейти на новую страницу.')) {
      event.preventDefault();
      event.stopPropagation(); // Закрываем поток обработчиков, чтобы избежать непредвиденных действий.
    }
  }
}

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a.confirm').forEach(function(link) {
    new ConfirmedLink(link);
  });
});

Класс ConfirmedLink самостоятельно добавляет обработчик нажатия и предотвращает распространение события, что гарантирует, что другие обработчики не будут вызваны случайно.

Использование jQuery: менее многословно, более функционально

jQuery упрощает работу с DOM, предоставляя метод on(), который обделяет удобством при работе с событиями в динамических элементах:

$('body').on('click', 'a.confirm', function(event) {
  if (!confirm('Вы действительно хотите покинуть эту страницу?')) {
    event.preventDefault(); // А если ещё немножко остаться на текущей странице?
  }
});

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

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

-Преобразование текстового описания в наглядное изображение- => 🚪➡️ 🌲 (Нарния) => 🚪🖱️🔒❓

1. "Да" -> 🌲 (Нарния)
2. "Нет" -> 🏠 (Домой)

Расширение совместимости: учтите различные браузеры и настройку диалогов

Метод confirm() поддерживается большинством браузеров, но всегда важно учитывать различия в компатибельности и предусмотреть альтернативные решения или полифилы.

Для создания более индивидуального и стильного диалога подтверждения, вы можете использовать библиотеки, такие как jQuery UI:

$("#confirmDialog").dialog({
  resizable: false,
  height: "auto",
  width: 400,
  modal: true,
  buttons: {
    "Подтвердить": function() {
      $(this).dialog("close");
      window.location.href = linkUrl;
    },
    "Отмена": function() {
      $(this).dialog("close");
    }
  }
});

Обеспечение доступности: внимание всем пользователям

Не забывайте об доступности ваших диалогов подтверждения для всех пользователей, включая тех, кто использует скринридеры и другие вспомогательные технологии. Корректно используйте ARIA-роли и атрибуты:

<div id="confirmDialog" role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc"></div>
<h2 id="dialogTitle">Подтверждение действия</h2>
<p id="dialogDesc">Вы уверены, что хотите покинуть страницу?</p>

Завершение: улучшение UX и повышение производительности

Подумайте над улучшением пользовательского опыта: нагромождение диалоговых окон может негативно сказываться на вовлеченности пользователей и вызывать раздражение. Используйте их осторожно, предоставляя понятные указания для подтверждения или отмены действия.

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

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

1. <a>: Элемент-якорь – HTML: Язык разметки гипертекста | MDN — подробности о применении элемента <a> в HTML.
2. Window.confirm() – Веб-API | MDN — подходы к использованию метода confirm() для создания пользовательских диалогов.
3. Создание окна подтверждения действия — инструкция по оформлению собственного модального окна для подтверждения действий пользователя.
4. Отображение диалога при клике на элемент <a> – Stack Overflow – обсуждение такте направлено на создание подтверждающих диалогов при нажатии на ссылку.