Красивое всплывающее окно и кнопки на jQuery, WebUI Popover

Как создать красивое всплывающее окно на JQuery, используя WebUI Popover

В данной статье рассмотрим пример того, как сделать Как сделать красивое всплывающее окошко на JQuery, используя WebUI Popover.



Плюсы
- плагин легкий
- функциональный
- современный дизайн

Посмотреть результат работы можно здесь.

Скачать плагин можно здесь.

Не забывайте о том, что Вам нужно будет подключить и библиотеку JQuery 1.7+. Как это сделать?

Начинаем работу над вызовом окна

Подключаем три файла (со стилями, то есть оформлением, саму библиотеку jquey и фреймворк webui-popover) в head:

<link rel="stylesheet" href="jquery.webui-popover.css">
...
<script src="jquery.js"></script>
<script src="jquery.webui-popover.js"></script>

Так используем плагин:

$('a').webuiPopover(options);

Пример создания простого окна выглядит так:

 $('a').webuiPopover({title:'Title',content:'Content'});

Всё просто. Создано самое обычное окно с заголовком и содержимым.

Для того, чтобы задать определённые параметры для появления, позиции окна можно указать их прямо в атрибутах ссылки:

<a href="#" data-title="Title" data-content="Contents..." data-placement="right"></a>
$('a').webuiPopover();

В настройках вызова окна можно указывать следующие настройки:

{
  placement:'auto',// Значения: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left
  width:'auto',// Ширина, числом
  height:'auto',// Высота, числом
  trigger:'click',// Значения: click, hover
  style:'',// Значения:  '', inverse
  delay:300,// Время задержки окошка, работает только, когда trigger == hover
  cache:true,// Если кэш равен false, popover будет пересоздаваться каждый раз
  multi:false,// Разрешить показ сразу нескольких окошек одновременно
  arrow:true,// Показать стрелки или нет
  title:'',// Заголовок, если пустая строка, заголовок будет автоматически скрываться
  content:'',// Содержание, может быть функцией
  closeable:false,// Показывать крестик закрытия окна или нет
  padding:true,// Отступ у контента
  type:'html',// Тип контента, значения: 'html', 'iframe', 'async'
  url:''// Если не пустая строка, контент будет загружаться из указанного адреса
}

Всё просто, красиво и современно! Дизайн сайта тоже важен)
Спасибо за внимание! Удачи в начинаниях!