398 PrettyPopin — jQuery плагин, который вызывает модальное окно с внешним контентом.
Так как этот плагин легко устанавливается и настраивается, то его можно использовать для быстрого и простого отображения содержимого в контексте.
Поддержка браузеров
Этот плагин был протестирован в следующих браузерах.
IE 6+ IE 7+ firefox 2.0+ chrome 3.0+ safari 3.1.1+
Установка
Нет ничего проще. Вначале вы наполняете содержимым веб-страницу, затем определяете, где у вас будет вызываться модальное окно с AJAX контентом.
Затем подключаете к странице библиотеку jQuery , плагин prettyPopin и его CSS стили.
|
1 2 3 |
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPopin.css" type="text/css" media="screen" charset="utf-8" /> <script src="js/jquery.prettyPopin.js" type="text/javascript" charset="utf-8"></script>> |
Добавляете rel=”prettyPopin” к любой ссылке, где будет производится запуск плагина.
|
1 |
<a href="ajax/regular.html" rel="prettyPopin">Regular content</a> |
* Примечание: В ссылке обязательно должен быть указан источник (атрибут href) для загрузки контента.
Инициализируем prettyPopin.
|
1 2 3 4 5 6 |
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPopin']").prettyPopin(); }); </script> |
Настройка
Настраивается плагин следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPopin']").prettyPopin({ <strong>modal</strong> : false, /* модальное окно true/false */ <strong>width</strong> : false, /* ширина окна false/integer */ <strong>height</strong>: false, /* высота окна false/integer */ <strong>opacity</strong>: 0.5, /* прозрачность значение от 0 до 1 */ <strong>animationSpeed</strong>: 'fast', /* скорость анимации slow/medium/fast/integer */ <strong>followScroll</strong>: true, /* следовать ли за скролом мыши true/false */ <strong>loader_path</strong>: 'images/prettyPopin/loader.gif', /* путь к изображению загрузки контента */ <strong>callback</strong>: function(){} /* функция обратного вызова при закрытии окна */ }); }); </script> |
Для того, чтобы работали ссылки внутри самого окна prettyPopin (например, паджинация), добавьте rel=”internal” к ссылкам , которые будут внутри prettyPopin.
|
1 |
<p>This is a normal bit of content <a href="page.html" rel="internal">this link will load in prettyPopin</a></p> |
Вы также можете назначить на любую ссылку внутри prettyPopin функцию закрытия окна плагина, для этого добавьте к ссылке атрибут rel=”close”.
Для того, чтобы контент в окне prettyPopin загружался верно, не ломая верстку вашего сайта, нужно предопределять ширину окна этого плагина при загрузке. Как это сделать, показано в разделе Установка.
Желаем вам удачи в установке и использовании этого плагина.
Сейчас уже много стало модальных окон, тяжело выбрать.
Я лично пользовался Impromptu, мне показался он проще. = )
Мне вот интересно, а в prettyPopin можно переходить из одного окна в другое?
Предположим при помощи кнопки next?
Да, если посмотрите пример, то увидите, что в этом модальном окне можно сделать мини-навигацию.
Здорово. Спасибо за ответ.= )
Просто я в код особо не вникал. Нужно как-нибудь попробовать ваш вариант...
Я уже привык к Impromptu, теперь осталось себя заставить, чтобы изучить что-то новое и сравнить. = (
P.s. Хорошие статьи на сайте. Желаю успехов всем в написании! ;-)
Все отлично, но хотелось бы чтобы окно можно было задавать в % соотношении или чтобы оно само определяло максимальный размер. Пришлось немного добавить JAVы кода но я не сильный знаток явы...