Сегодня мы рассмотрим интересный скрипт, который поможет нам выводить любые внешние файлы в красивом модальном окне.
Данная функция будет особенно полезна на сайтах, где необходимо представить много информации, и в то же время не сильно загружать страницу. Все дополнительные документы можно выводить в таких модальных окнах.
С самого начала документа подключаем фреймворк и функцию::
<script src="jquery.tools.min.js"></script>
<script>
$(function() {
$("a[rel]").overlay(function() {
var wrap = this.getContent().find("div.wrap");
if (wrap.is(":empty")) {
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
Далее подключаем стили оформления. В данном примере я использовал и внешнюю таблицу стилей и внутренние стили. Можете их объединить в одном месте, если желаете.
<link rel="stylesheet" type="text/css" href="overlay-minimal.css"/>
<style>
body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
/* use a semi-transparent image for the overlay */
#overlay {
background-image:url(transparent.png);
color:#efefef;
}
/* container for external content. uses vertical scrollbar, if needed */
div.wrap {
height:441px;
overflow-y:auto;
}
</style>
В коде присутствуют пути к картинкам, так что если будете их переносить - не забывайти про пути.
И теперь в любом месте документа вставляем ссылку на внешний файл и создаем кнопку для вызова этого файла.
<a href="external-content.htm" rel="#overlay">
<button type="button">Показать внешний файл в модальном окне!!!</button>
</a>
<div class="overlay" id="overlay">
<div class="wrap"></div>
</div>
Урок закончен. До завтра.