Як створити вікно сповіщення JavaScript або спливаюче вікно

Спливаючі вікна (або діалогові вікна) - це модальні вікна, що використовуються для сповіщення або попередження користувача або отримання вхідних даних від користувача.

Спливаючі вікна заважають користувачеві отримати доступ до інших аспектів програми, поки спливаюче вікно не буде закрито, тому їх не слід надмірно використовувати.

У JavaScript використовуються три різні види спливаючих методів: window.alert (), window.confirm () та window.prompt ().

Сповіщення

Метод попередження відображає повідомлення, які не вимагають від користувача введення відповіді. Після виклику цієї функції з’явиться діалогове вікно попередження із зазначеним (необов’язковим) повідомленням. Користувачі повинні підтвердити повідомлення перед тим, як сповіщення зникне.

Приклад:

window.alert("Welcome to our website");

Приклад сповіщення MDN

Підтвердити

Метод підтвердження подібний до window.alert(), але також відображає кнопку скасування у спливаючому вікні. Кнопки повертають булеві значення: true для OK і false для Cancel.

Приклад:

var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }
Приклад підтвердження MDN

Підкажіть

Метод підказки зазвичай використовується для отримання введення тексту від користувача. Ця функція може приймати два аргументи, обидва необов’язкові: повідомлення для відображення користувачеві та значення за замовчуванням для відображення у текстовому полі.

Приклад:

var age = prompt('How old are you?', '100');

Приклад підказки MDN

Інші варіанти дизайну:

Якщо ви незадоволені спливаючими вікнами JavaScript за замовчуванням, ви можете замінити їх у різних бібліотеках інтерфейсу користувача. Наприклад, SweetAlert забезпечує приємну заміну стандартним модальним JavaScript. Ви можете включити його у свій HTML через CDN (мережа доставки вмісту) і розпочати використання.

Синтаксис такий: swal(title, subtitle, messageType)

swal("Oops!", "Something went wrong on the page!", "error");

Наведений вище код створить таке спливаюче вікно:

Приклад SweetAlert

SweetAlert - це далеко не єдина заміна стандартних модалів, але він чистий і простий у реалізації.

Більше інформації:

  • MDN window.alert ()
  • MDN window.confirm ()
  • MDN window.prompt ()