Заменете JavaScript предупредителните кутии с тази отзивчива алтернатива

Изскачащи прозорци с предупреждение за JavaScript са отвратени от почти всички. Те принуждават вниманието ви и изпреварват браузъра, така че трябва да ги затворите, преди да можете да взаимодействате със страницата.

В съвременната ера можем по-добри от предупредителните кутии на JavaScript. SweetAlert2 вероятно е най-доброто решение.

Това е Изскачащ скрипт с JavaScript това е предназначено да бъде напълно отзивчив и подкрепа за достъпност за всички потребители.

Естествено, това също е отворен източник и свободно достъпни на GitHub ако искаш да копаеш кода.

Но истинското съкровище е демото на главната уеб страница на SweetAlert. То предлага директно сравнение между оригиналната кутия с предупреждения за JavaScript и съобщението SweetAlert2.

Какво е смешно, кодовите фрагменти не изглеждат като голяма разлика. Можеш стартирайте SweetAlert2 с един ред код точно като типично предупреждение за JavaScript, въпреки че този ред може да е по-дълъг в сравнение.

С SweetAlert, вие имат по-голям контрол над стила на изскачащия прозорец, анимацията, цветовете на бутоните и текстовите стилове. Можете дори вграждате изображения или видеоклипове в полето за предупреждение.

Най-добрата характеристика обаче е, че SweetAlert2 не изпреварване на целия браузър. Ако пуснете изскачащо съобщение на SweetAlert2, ще го направите показва само на този раздел, така че дори ако потребителят сърфира в друг сайт, те няма да бъдат насилствено насочени към вашия раздел, само защото се появи сигнал.

Това в крайна сметка увеличава ангажираността на потребителя защото хората не са отблъснати поради сенчести практики на UX.

Можеш настройте таймерите за автоматично затваряне, потвърдете / отхвърлете бутоните, и дори персонализирайте анимацията използване на библиотеки на трети страни, като Animate.css.

Ако има някакъв скрипт, който трябва да използвате вместо типичния JavaScript, той трябва да бъде SweetAlert2. Това е нещо напълно безплатно, отворен код, и предлага куп персонализирани опции че всеки уеб разработчик ще се ухили от ухо до ухо.

Вижте основния уебсайт, за да научите повече и виж някои живи примери. Можете също да прегледате GitHub repo, ако искате да видите файловете и да проверите регистрационните файлове за освобождаване.