Красивые всплывающие окна с помощью jQuery

Сегодня мы рассмотрим интересный плагин jQuery при помощи которого можно создать всплывающие окна а также всплывающие блоки. Его можно использовать как для отображения рекламы, так и для проведения собственных маркетинговых компаний на сайте. Плагин очень гибок и простой в установке. Приступим к установке плагина:

Прежде всего нам необходимо подключить фреймворк и файл плагина.

<script src=»jquery-1.3.2.min.js» type=»text/javascript»></script>
<script src=»jquery.meerkat.js» type=»text/javascript»></script>

Далее производим инициализацию необходимой основной функции:

<script type=»text/javascript»>// <![CDATA[
$(document).ready(function(){
meerkat();
});
// ]]></script>

В данном примере мы не задаем каких-либо дополнительных настроек, поэтому они будут взяты по умолчанию.

Последним шагом будет вставка Div с необходимым текстом где-либо в документе (лучше всего перед закрывающим тегом ). Обязательно id должно быть meerkat.

<div id=»meerkat»>Meerkat Content Goes Here</div>

Значения по умолчанию данного плагина будут такими:

meerkat({
showMeerkatOnLoad: ‘false’,
close: ‘none’,
dontShow: ‘none’,
dontShowExpire: 0,
removeCookie: ‘none’,
meerkatPosition: ‘bottom’,
animation: ‘slide’,
animationSpeed: ‘slow’,
height: ‘auto’,
background: ‘none’
});

Подробнее об опциях плагина:

showMeerkatOnLoad — принимает два значения: true или false. Когда true, плагин будет показываться при вызове функции (при загрузке страницы). Когда false, плагин будет работать только при нажатии на кнопку.
По умолчанию — «false»

close — данная опция принимает любой селектор (к примеру, «.close» или «#close»). Когда пользователь нажимает на селектор, указанный в опциях, плагин будет закрыт.
По умолчанию — «none»

dontShow — данная опция принимает любой селектор (к примеру, «.dont-show» или «#dont-show»). Когда пользователь нажимает на селектор, указанный в опциях, плагин будет закрыт и не будет показан до перезагрузки браузера или до истечения определенного количества дней (зависит от dontShowExpire)
По умолчанию — «none»

dontShowExpire — если Вы задаете эту опцию, у Вас есть возможность определить длительность периода «не отображения» данного плагина. Значение может быть в интервале от 0 до 365. Кроме этого можно указать 0.5 (плагин не будет показываться 12 часов). Если укажите 3, тогда не будет работать 3 дня.
По умолчанию — «0″

removeCookie — используется для удаления Cookie, которое создается опцией dontShow. Опция removeCookie принимает любой селектор (к примеру, «.remove-cookie» или «#remove-cookie»).
По умолчанию — «none»

meerkatPosition — принимает два значения top или bottom (верх или низ). Тут, я думаю, все понятно.
По умолчанию — «bottom»

animation — 2 значение — slide или fade. Можно варьировать разные типы анимации показаскрытия плагина.
По умолчанию — «slide»

animationSpeed — скорость анимации. Принимает три значения («slow», «normal», или «fast») или кол-во милисекунд для анимации (например, 1000).
По умолчанию — «slow»

height — возможно указать высоту блока с помощью всех возможных единиц измерения CSS (px, em, %, auto, и т.д.).
По умолчанию — «auto»

background — можно задать фоновый цвет или изображение. Пример: background: ‘#000 url(/path/to/bgimage.jpg) no-repeat left top’
По умолчанию — «none».

Если же вам необходимо посмотреть больше примеров, то вы можете просмотреть их здесь. Спасибо за внимание.