Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Создание красивых диалоговых окон с помощью плагина popupWindow

Дата добавления: 02.07.2019 - 09:42
Добавил: Buger
Количество просмотров: 30
Количество комментариев: 0
Размер файла: 11.9 Kb
Рейтинг материала: 0.0 / 0
Создание красивых диалоговых окон с помощью плагина popupWindow
рейтинг 0.0
/
голосов 0
Плагин для замены всплывающих окон JavaScript для создания красивых, анимированных предупреждений, подсказок и подтверждения в диалоговых окнах на странице.

Особенности:
  • Пользовательские иконки.
  • Плавные переходы.
  • Пользовательский текст кнопки.
  • Обычный размер.
  • Обратный вызов onClose

Как использовать:


1. Подключите таблицу стилей popupWindow.css в head и скрипт popupWindow.js после jQuery.
Код
<link rel="stylesheet" href="/path/to/popupWindow.css" />
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/popupWindow.js"></script>


2. Базовое диалоговое окно, чтобы предупредить пользователя о чем-либо.
Код
$.popupWindow({
  type: 'alert',
  title: 'Alert Dialog',
  content: 'I am an alert box',
  onClosed: function(arg){
  // closed
  }
});


3. Диалоговое окно подтверждения, чтобы подтвердить намерения пользователя.
Код
$.popupWindow({
  type: 'confirm',
  title: 'Confirm Dialog',
  content: 'I am a confirm box',
  cancelText: 'Not Sure',
  confirmText: 'Confirm',
  onClosed: function(arg){
  // closed
  }
});


4. Диалоговое окно с приглашением для получения дополнительной информации.
Код
$.popupWindow({
  type: 'prompt',
  title: 'Prompt Dialog',
  content: 'I am a prompt box',
  onClosed: function(arg1,arg2){
  console.log(arg1); // true or false
  console.log(arg2) // input value
  }
});


5. Здесь указаны все параметры по умолчанию для настройки плагина всплывающего окна popupWindow.
Код
$.popupWindow({

  "alert", "confirm", or "prompt"
  type: 'alert',

  // "hint", , "error", or "correct"
  icon: 'hint',

  // заголовок окна
  title: 'Title',  

  // содержимое в диалоговом окне
  content: 'Dialog Content',

  // ширина окна
  width: 540,

  // верхнее смещение
  top: 300,

  // кнопка отмены
  cancelText: 'Cancel',

  // кнопка подтверждения
  confirmText: 'OK',

  // скорость перехода в мс
  transition: 300,

  // обратный вызов
  onClosed: function (arg1, arg2) { }
   
});
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: