Як зробити красиве спливаюче віконце на jquery, використовуючи webui popover.

Відео: Спливаюче вікно / Popup вікно на Jquery

Сьогодні я розповім про те, як зробити красиве спливаюче вікно на JQuery, використовуючи плагін WebUI-Popover.

Це легкий і швидкий плагін, що дозволяє сдеалать красиве спливаюче вікно на JQuery.

Відео: Скрипт модального вікна remodal.js

У нього є досить багато налаштувань, ви можете погратися з ними і тут же подивитися результат тут.

Завантажити же даний плагін ви можете тут.

Також вам буде потрібен JQuery 1.7+.

Підключаємо потрібні файли:

rel="Stylesheet"href="Jquery.webui-popover.css"gt; 
...

Використовувати плагін так:

$(`A`).webuiPopover(options) -

Створити найпростіше віконце ви можете так:

$(`A`).webuiPopover({title:`Title`,content:`Content`}) -

Тут ви просто задаєте заголовок і вміст віконця.

Також, ви можете задати необхідні параметри прямо в атрибутах до заслання:

href="#"data-title="Title"data-content="Contents ..."data-placement="Right"gt; 
$ ( `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:``// Якщо не порожній рядок, контент буде завантажуватися з вказаної адреси 
}