В сегодняшнем уроке я продемонстрирую Вам один интересный плагин, который способен отображать внешние файлы в модальном окне.

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

В верху документа необходимо подключить скрипты и таблицы стилей:

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" title="Main stylesheet" charset="utf-8" />
		<script src="js/jquery-1.3.min.js" type="text/javascript"></script>
         <script src="js/jquery.prettyPopin.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="css/prettyPopin.css" type="text/css" media="screen" charset="utf-8" />

Теперь достаточно в любом месте тела документа добавить обычную ссылку с атрибутом rel="prettyPopin". В нашем примере Вам представлен неупорядоченный список из 3-х ссылок:

<ul class="noBull">
					<li><a href="ajax/regular.html" rel="prettyPopin">Regular content (defined width, fixed)</a></li>
					<li><a href="ajax/page-1.html" rel="prettyPopin">Content with paging (defined width, follow the scroll)</a></li>
					<li><a href="ajax/form.html" rel="prettyPopin">Ajax form (width inherited from the &lt;form&gt;, follow the scroll)</a></li>
				</ul>

И в конце самое интересное. Необходимо задать параметры функции вызова всплывающих модальных окон.

Делается это следующим образом:

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPopin']:eq(0)").prettyPopin({width: 550,followScroll:false});
			$("a[rel^='prettyPopin']:eq(1)").prettyPopin({width:300});
			$("a[rel^='prettyPopin']:eq(2)").prettyPopin({
				callback : function(){
					alert('This popin has a callback');
				}
			});
		});
		</script>

Как Вы видите ширина задается с помощью width. Можно добавить функцию колбека (при закрытии окна выводится небольшое предупреждение или полезная информация) с помощью callback : function()

Кроме это в демо версии представлена даже возможность вставлять работающие формы с загрузкой результата работы прямо в этом же окне. Вообще, для того, чтобы оставаться в модальном окне во время нажатия на ссылку, у ссылки должен быть атрибут rel="internal".

Все готово. Удачи!

Добавлено: 09 Мая 2018 10:03:49 Добавил: Андрей Ковальчук Нравится 0

Добавить