Реализация подтверждения перед удалением: диалог 'Ок'/'Отмена'

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

Для создания диалога подтверждения вы можете использовать функцию JavaScript confirm() в сочетании с событием onclick:

<button onclick="return confirm('Вы действительно хотите безвозвратно удалить эти данные?');">Удалить</button>

Нажатие на кнопку "ОК" дает разрешение на удаление, а "Отмена" останавливает этот процесс.

Понимание сути подтверждения пользователем

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

Взаимодействие пользователя

Событие onclick является мощным инструментом в руках веб-разработчика. Его сочетание с confirm() позволяет пользователям легко и ясно подтверждать или отменять команду удаления:

<a href="#" onclick="return confirm('Вы уверены, что хотите выполнить это действие?');">Удалить</a>

Подробнее об этом расскажет наш спикер на видео

Согласованность с дизайном

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

Ясное разделение между HTML и JavaScript

Если мы соблюдаем разделение кода между HTML и JavaScript, это помогает писать более структурированный и аккуратный код:

function considerBeforeYouDelete() {
    let userResponse = confirm('Вы уверены, что желаете это удалить?');
    if (userResponse) {
        // Удаление подтверждено!
    }
}

В HTML этот код будет выглядеть так:

<button onclick="return considerBeforeYouDelete()">Удалить</button>

Овладение продвинутыми подтверждениями

Расширяйте пользовательский опыт и уровень контроля над вашим кодом, используя дополнительные возможности.

Применение data-атрибутов для передачи сообщений

Атрибуты HTML5 типа data-* прекрасны для создания скрытых сообщений подтверждения прямо в HTML, сохраняя при этом чистоту кода JavaScript и ясность его функций:

<button data-confirm="Вы наверняка готовы сделать это?">Удалить</button>

После этого извлекаем атрибут в JavaScript:

document.querySelector('button[data-confirm]').onclick = function() {
    return confirm(this.getAttribute('data-confirm'));
};

Отмена события

Функция preventDefault() подходит для сложных сценариев удаления, позволяя держать процесс под контролем до момента подтверждения действия пользователем:

document.querySelector('button[data-confirm]').onclick = function(e) {
    if (!confirm(this.getAttribute('data-confirm'))) {
        e.preventDefault(); // Удаление отменено!
    }
};

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

Проверьте, что ваш код JavaScript поддерживает все популярные браузеры, включая старые версии Internet Explorer.

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

Рассмотрим визуализацию процесса:

До: [📄, 📄, 📄❌, 📄] // Планируем удалить третий документ.

Активируем функцию confirm():

if (confirm('Вы уверены, что хотите выполнить это действие?')) {
    // Удаление подтверждено!
}

Действие ожидает подтверждения:

После подтверждения: [📄, 📄, 🕸️❌] // Удаление еще не произошло.

Если действие подтверждено:

После удаления: [📄, 📄, 📄] // Третий документ был удален.

Если действие отменено:

Без изменений: [📄, 📄, 📄❌, 📄] // Все документы остались на месте.

Переход к индивидуальным решениям

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

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

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

<div id="customModal" class="modal">
  <div class="modal-content">
    <p>Вы действительно хотите удалить?</p>
    <button id="yesDelete">Да, удалить</button>
    <button id="noDelete">Нет, сохранить</button>
  </div>
</div>

В JavaScript настройте отображение и скрытие модального окна, а также обработку нажатий на кнопки:

document.getElementById('yesDelete').onclick = function() {
    // Удаление подтверждено.
    hideModal();
};

document.getElementById('noDelete').onclick = function() {
    // Удаление отменено.
    hideModal();
};

function hideModal() {
    document.getElementById('customModal').style.display = 'none';
}

С учетом предпочтений пользователя

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

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

1. Window: confirm() method – Web APIs | MDN — Описание функции window.confirm().
2. Interaction: alert, prompt, confirm – JavaScript.info — Подборка советов по работе с интерактивными диалоговыми окнами.
3. Considerations for Styling a Modal | CSS-Tricks — Советы по стилизации модальных окон.
4. How to create a dialog with “Ok” and “Cancel” options – Stack Overflow — Совместное создание диалогового окна на Stack Overflow.
5. GitHub – ghosh/Micromodal: ⭕ Tiny javascript library for creating accessible modal dialogs — Библиотека для разработчиков, которые хотят создать настраиваемые модальные окна.
6. How To Make Modal Windows Better For Everyone — Smashing Magazine — Рекомендации по созданию модальных окон, удобных для использования всем пользователям.