Главная » Шпаргалка » PHP MYSQL javascript » jQuery » Загрузка внешнего файла в модальное окно

Загрузка внешнего файла в модальное окно

http://www.ruseller.com/lessons/les253/example/index.html



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

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

С самого начала документа подключаем фреймворк и функцию::

<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>

Урок закончен. До завтра.