Как да създадете поле за предупреждение на 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 ()