Сравнение различных типов всплывающих окон, встроенных в JavaScript

JavaScript имеет множество встроенных API, которые выводят специальное окно для взаимодействия с пользователем. Самый популярный из них:

alert("Hello, World!");

После выполнение этого кода вы увидите небольшое модальное окно, содержащее переданный текст.

В сплывающее окно Firefox (слева) и Google Chrome (справа). Обратите внимание на дополнительный флажок в Firefox, позволяющий пользователю отказаться получать всплывающие сообщения более одного раза.

Проблема, о которой нужно знать

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

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

Теперь рассмотрим различные варианты реализации всплывающих окон.

window.alert()

window.alert("Hello World");

<button onclick="alert('Hello, World!');">Show Message</button>

const button = document.querySelectorAll("button");
button.addEventListener("click", () => {
  alert("Text of button: " + button.innerText);
});

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

Как это работает: функция window.alert() получает строку и отображает ее во всплывающем окне с кнопкой «ОК». Вы можете изменить только сообщение.

Альтернатива: для информирования пользователей лучше использовать другие средства. Для отладки подойдет console.log("Value of variable: ", variable);.

window.confirm()

window.confirm("Are you sure?");

<button onclick="confirm('Would you like to play a game?');">Ask Question</button>

let answer = window.confirm("Do you like cats?");
if (answer) {
  // Пользователь нажал OK
} else {
  // Пользователь нажал Cancel
}

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

Как это работает: вы можете задать текст сообщения, а всплывающее окно предоставит кнопки «ОК» и «Отмена». Затем можно перехватить вариант, который выбрал пользователь.

Альтернатива: существует большое количество других менее навязчивых способов получения подтверждения действия от пользователя. Например, HTML-кнопка: <button>Подтвердить</button>.

window.prompt()

window.prompt("What’s your name?");
let answer = window.prompt("What is your favorite color?");
// в answer будет то, что ввел пользователь

Использование: получение от пользователя ответа на поставленный вопрос. Во всплывающем окне отображается текстовое поле для ввода и кнопками «ОК» и «Отмена».

Как это работает: если пользователь нажмет кнопку «ОК», вы получите введенное в текстовое поле значение. Если он ничего не введет и не нажмет «ОК», вы получите пустую строку. Если он нажмет кнопку «Отмена», возвращаемым значением будет null.

Альтернатива: как и другие встроенные оповещения, prompt нельзя стилизовать и позиционировать. Поэтому для получения информации от пользователя лучше использовать форму.

window.onbeforeunload()

window.addEventListener("beforeunload", () => {
  // Обычный вызов метода, чтобы отменить операцию
  event.preventDefault();
  // В Chrome требуется задать returnValue
  event.returnValue = '';
});

Использование: оповещение пользователя перед тем, как он покинет страницу. Оно применяется на сайтах, где необходимо сохранить результат проделанной работы.

Как это работает: если вы прикрепили событие beforeunload к всплывающему окну то, пользователи увидят сообщение с просьбой подтвердить, хотят ли они покинуть страницу или нет. Окно отображается после нажатия на ссылку, кнопки обновления страницы или кнопки «Назад» в браузере. Но вы не сможете изменять сообщение в зависимости от этих событий.

MDN предупреждает, что некоторые браузеры блокирую вывод диалоговых окон этого типа.

Альтернатива: нет. Стоит использовать только в том случае, если пользователь может потерять результат проделанной работы.

Доступность

Встроенные предупреждения JavaScript раньше не одобрялись из-за проблем с доступностью на различных устройствах. Но теперь они их понимают.

Альтернативы

В качестве альтернативы встроенным всплывающим окнам JavaScript могут выступать специализированные сторонние библиотеки. А также HTML-элемент <dialog>.

Кроме этого некоторые фреймворки, такие как Bootstrap, реализуют собственные модальные окна. В качестве примера вы можете изучить проект a11y-dialog.

Заключение

Использование встроенных API-интерфейсов может показаться правильным решением. Но у них есть серьезные проблемы с пользовательским опытом и производительностью.