Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Создание красивых диалоговых окон с помощью плагина popupWindow
Дата добавления: 02.07.2019 - 09:42
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 30
Количество комментариев: 0
Размер файла: 11.9 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Плагин для замены всплывающих окон JavaScript для создания красивых, анимированных предупреждений, подсказок и подтверждения в диалоговых окнах на странице.
Особенности:
1. Подключите таблицу стилей popupWindow.css в head и скрипт popupWindow.js после jQuery.
2. Базовое диалоговое окно, чтобы предупредить пользователя о чем-либо.
3. Диалоговое окно подтверждения, чтобы подтвердить намерения пользователя.
4. Диалоговое окно с приглашением для получения дополнительной информации.
5. Здесь указаны все параметры по умолчанию для настройки плагина всплывающего окна popupWindow.
Особенности:
- Пользовательские иконки.
- Плавные переходы.
- Пользовательский текст кнопки.
- Обычный размер.
- Обратный вызов 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>
<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
}
});
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
}
});
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
}
});
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) { }
});
"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) { }
});
Поделись с друзьями:
