Скрипты уведомления

На этой странице продемонстрированы два самых простых и приятных на вид уведомления пользователя о выполненном или неудачном выполнении действия. Как правило для таких уведомлений применяются диалоговые окна, которые устанавливают некую обратную связь вашего веб-приложения с пользователем.

Оглавление:
  1. Окна уведомления
  2. noty
  3. sweetAlert

Окна уведомления

Первый пример уведомления посредством jQuery используя плагин noty. Второй способ уведомления использует библиотеку sweetAlert, которая работает аналогично окну браузера Alert. Библиотека sweetAlert2 работает на любом типе устройств, так что Вы легко можете использовать их для своего веб-сайта.

Чаше всего уведомления используются в админ панели для подтверждения выполнения действия или уже о выполненном действии. Еще, уведомления используют на динамических сайтах, например, уведомить пользователя о отправке данных веб-формы и т.д…

к меню ↑

noty

Первый шаг состоит в том, чтобы скачать сам плагин noty и подключить его к странице после библиотеки jQuery.

<script src='//code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='jquery.noty.packaged.min.js'></script>

Простой пример, который использует этот плагин.

noty({ text: 'Готово!'});

Уведомление появляется вверху окна браузера, закрывается после нажатия на него.

Используя этот плагин можно добавить немного больше опции. Уведомление, согласно опциям появляется по центру окна браузера, закрывается после наведения на него курсора.

$.noty.defaults.killer = true;

noty({
   text: 'Готово!',
   layout: 'center',
   closeWith: ['click', 'hover'],
   type: 'success'
})

к меню ↑

sweetAlert

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

<link rel='stylesheet' href='css/sweetalert2.css' type='text/css' media='all' />
<script src='js/sweetalert2.min.js'></script>

swal('Готово!', 'Ваше сообщение было успешно отправлено', 'success');

swal({
   title: 'Подтвердить',
   text: 'Вы уверены, что хотите удалить это сообщение?',
   type: 'warning',
   showCancelButton: true,
   confirmButtonColor: '#DD6B55',
   confirmButtonText: 'Удалить!',
   cancelButtonText: 'Не удалять!',
   closeOnConfirm: false,
   closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
      swal('Готово!', 'Сообщение удалено!', 'success')
  } else {
      swal('Закрыть', 'Сообщение не удалено', 'error');
  }
});

Посмотреть все варианты уведомления sweetAlert2 можно на официальной странице sweetalert2.